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

Posted 2023-02-22

【中文标题】v-model 将字符串与 var 连接起来？

【英文标题】：v-model concatenate a string with a var?

【发布时间】：2019-08-24 00:39:45

【问题描述】：

我已阅读诸如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)

【问题讨论】：

你能分享出现的编译错误吗？

【参考方案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]">

对你来说已经足够了。

【参考方案2】：

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">

【讨论】：

这不起作用。编译错误SyntaxError: Assigning to rvalue

感谢您更新您的答案，但恐怕绑定仍然不起作用。 return checked.$this.name;`如果没有从v-model="checkedName" 传递给setter set: function (newValue)，它如何知道名称？

set: 会在你执行checkedName = $event 时触发，newValue 是$event。检查jsfiddle

示例不正确，因为它不在循环甚至复选框中。

我已经更新了fiddle，但我不确定你想要达到什么目的。您想在names 中存储什么值？

【参考方案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 - 这不是有效的左手符号表达式。

【讨论】：

但是当我手动设置 v-model 来做我想做的事情时，它工作正常。我只是想连接一个字符串和变量名。

这正是我所说的。 Vue 可以轻松连接。它不能解气。所需的双向数据绑定的一种方式是不可能的。

我不确定我明白你在说什么。 v-model="checked.myname" 有效，那么为什么我们不能从 var 中连接这个值呢？

我们可以concat 我们不能反过来。通过与'checked.'myname 的双向绑定，当输入值更新时，Vue 将无法知道要更新哪个变量，因为在连接过程中对象引用丢失了。因此错误。

连接时对象引用不会丢失，连接创建引用。例如，串联产生v-model="checked.myname"，它引用数据中的一个项目。