带有 vue 指令的 Html 属性驼峰式案例答案

【问题标题】：Html attribute camel-case with vue directive带有 vue 指令的 Html 属性驼峰式案例
【发布时间】：2022-01-12 08:26:05
【问题描述】：

我正在开发一个带有 Vue.js(Vue3) 前端的 MVC 项目。出于某种原因，当我尝试使用任何包含驼峰式参数的指令时，如下例所示，它们会自动变为全小写，从而使我的指令完全无效。

<label for="Name" class="required" v-init:camelCaseAttribute="'variableValue"> labelValue </label>

当我使用字典定义所述属性时也会发生这种情况：

@Html.TextBoxFor(m => m.Registration.Section03.Address.ZipCode, htmlAttributes: new Dictionary<string, object> { { "v-init:camelCaseAttribute", "'variableValue'" } })

我知道这是一个 HTML 的东西，但是有什么已知的解决方法吗？

应该为问题提供更多背景信息：

   const myComponent = { // my component
    data: function () {
        return {
            camelCaseProperty: '' // property I am trying to initialise with some value
        }
    },
    directives: {
        init: { // custom init directive
            mounted(el, binding, vnode) {
                console.log(binding.arg)
                binding.instance[binding.arg] = binding.value;
            }
        }
    }
};

"init" 确实不是内置的 Vue 指令，所以当我尝试从具有 init 指令的 angularjs 迁移项目时，我试图想出在某种程度上提供类似功能的东西，如见于sn-p。在 kebab-case (v-init:camel-case-property="something") 中写入指令参数没有任何效果，因为记录实际到达指令的 binding.arg 仍在 kebab-case 中。

【问题讨论】：

我认为您没有使用单文件组件？根据我的经验，在 vue SFC 模板中使用蛇形大小写属性类似于骆驼大小写属性，因此您可以尝试 v-init:camel-case-attribute，但我不确定这是否适用于 vue 的 SFC 编译器。
你说的完全正确，我没有使用 SFC。 Vue 实例在 JS 文件中定义，然后我将它安装在 Razor 视图中
如果您展示了您尝试使用更多代码的内容，将会有所帮助。 v-directive:your-argument-here="propValue" 应该适用于 yourArgumentHere，如果 yourArgumentHere 和 propValue 在您渲染标签的组件的设置中定义。 v-init 不是 Vue3 中包含的指令，那么它是伪代码示例还是来自库？如果你只是想传递一个道具，你可以使用 v-bind （最终使用 .camel 修饰符，如下所述：v3.vuejs.org/api/directives.html#v-bind）。
我刚刚更新了我的问题。感谢您的意见

标签： html vue.js razor vuejs3 vue-directives

【解决方案1】：

这可能发生；因此，建议对 Vue 中的所有 html 属性（包括 props）使用 kebab-case。

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写

source

【讨论】：

这意味着当您使用 in-DOM 模板时，camelCased 的 prop 名称需要使用它们的 kebab 大小写（连字符分隔）等效项： source。我尝试在 html 属性名称中使用连字符，但它仍在转换为小写
使用小写。不要让它比它需要的更复杂。在 HTML 中始终使用小写；以防万一；）