v-model 将字符串与 var 连接起来？

Question

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

我需要将字符串与 v-model 中的 var 连接起来以绑定到对象内的数组：

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

我只是得到一个编译错误。

当我这样做时：

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

它编译得很好，所以它是 v-model 的东西。

编译错误是：

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="name" 可以帮助您做两件事。

1. :value="name"
2. @input="name = $event

但是，在你的情况下，你正在做v-model="'checked.'+name"，这意味着：

1. :value="'checked.'+name" // which is perfectly fine
2. @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">

Answer 3

你不能这样做。

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

如您所见，myField 必须是 JS 中的有效左侧表达式，顺便说一下，Vue 精确定义的 of the rules 具有有效的v-model：

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

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