时间戳

首页 > 解决方案 > Vue.js 动态指令参数不起作用

javascript - Vue.js 动态指令参数不起作用

问题描述

我正在学习 Vue.js(2.6.*)。在这里，他们提到了动态指令参数。根据那里的文档，下面的代码应该可以工作-

<a v-bind:[attributeName]="url"> ... </a>

如果我有一个名为的数据属性

属性名

在我的 vue 实例中。但下面的代码显示错误 -

var app = new Vue({
el: "#app",
data: {
message: "Hello World",
argValue: "This is a simple text",
dynamicArg: "title"
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<p v-bind:[dynamicArg]="argValue">
{{message}}
</p>
</div>

动态指令参数的值无效（预期的字符串或 null）：未定义

我在这里缺少什么？TIA

标签： javascriptvuejs2

解决方案

在“动态参数表达式约束”中它说：

动态参数表达式有一些语法限制，因为某些字符（例如空格和引号）在 HTML 属性名称中是无效的。例如，以下内容无效：

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>

解决方法是使用不带空格或引号的表达式，或者用计算属性替换复杂表达式。

camelCase似乎也给出了警告，但没有提到：

var app = new Vue({
  el: "#app",
  data() {
    return {
      message: "Hello World",
      argValue: "This is a simple text",
      dynamicarg: "data-foo"
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


<div id="app">
  <div :[dynamicarg]="argValue">{{ message }}</div>
</div>

或者更好的是，创建一个返回所需字符串名称的计算属性。

推荐阅读