Question

我已阅读诸如this之类的答案，但无法编译我的模板。

我需要在v-model中用var连接字符串以绑定到对象内部的数组：

<li v-for="name in names">
    <input type="checkbox" v-model="'checked.'+name">
    ....

我只是遇到了一个编译错误。

同样，当我这样做时：

:data-test="'checked.'+name"

它可以很好地编译，因此可以使用v模型。

编译错误为：

Syntax Error: SyntaxError: Unexpected token (1:1161)

Answer 1

以防稍微不同的观点有帮助：无论是在v-model还是:data-test指令中使用它

'checked.'+name

产生一个字符串。尽管这可能不是人们通常想要做的，但这在语法上对任意v-bind（例如:data-test）是合法的。但是，对于v-model，这在语法上是不合法的。正如其他人指出的那样，v-model尝试为"change"事件分配值。例如，它等同于

'checked.foo' = true;

当我认为您想要的是

checked.foo = true;

很难确定没有看到更多代码，但这可能是这种情况

<input type="checkbox" v-model="checked[name]">

足够您了。

Answer 2

你不能那样做。

v-model用于双向数据绑定，对于复选框而言，它是:checked="myField" + @change="evt => myField = evt.target.checked的语法糖。

如您所见，myField在JS中必须是有效的左侧表达式，这是Vue精确定义的of the rules具有有效的v-model的方式：< / p>

指令没有作为LHS有效的属性值。例如。 <input v-model="foo() + bar()">

这就是为什么模板无法编译的原因。 Vue可以了解如何以一种方式绑定数据，因为它可以将'checked.'+name分配给变量，但不能将变量分配给'checked.'+name-这不是有效的左手符号表达式。

Answer 3

v-model="name"帮助您完成两件事。

:value="name"
@input="name = $event

但是，对于您而言，您正在做v-model="'checked.'+name"，这意味着：

:value="'checked.'+name" // which is perfectly fine
@input="'checked.'+name = $event" // this would cause an error.

可以找到文档here。

下面是我的一些解决方案：JsFiddle


  computed: {
    checkedName: {
      // getter
      get: function () {
        return `${this.prefix}${this.name}`;
      },
      // setter
      set: function (newValue) {
        this.name = newValue.replace(this.prefix, '');
      }
    }
  },

然后

<input type="checkbox" v-model="checkedName">

v模型将字符串与var连接起来？

3 个答案: