vue.js v模型绑定到json对象的子属性

Question

我有一个名为valuesRequired的JSON对象，该对象列出了我为其他目的而比较的所有值。我想做的就是使用这个已经创建的对象绑定到输入。我似乎找不到解决方法。

这是代码，我只提供了必要的方面来展示我想要做的事情，而不是所有其他方法等。我要做的方面特别是v-model="valuesRequired.{{item.name}}"，在下面的示例中最终将成为v-model="valuesRequired.foo"

<ul>
    <li v-for="item in listItems" :key="item.description">
        <label :for="item.name">{{ item.description }}</label>
        <input :type="item.type" :name="item.name" v-model="valuesRequired.{{item.name}}" />
    </li>
</ul>
</fieldset>

<script>
    export default {
        data: function () {
            return {
                valuesRequired: {
                    foo: "bar"
                }
            }
        }
    }
</script>

当前要解决此问题，我正在向this.$data动态添加属性，但是随后需要我将它们映射到valuesRequired对象中。

非常感谢您的帮助！

Answer 1

{{item.name}}用于默认值是文本

您的问题是，当您执行v-model='valuesRequired.{{item.name}}'时，它会呈现为v-model='valuesRequired.{{My Name}}'。

本质上，传递给v-model的文本被评估为JavaScript，因此，您应该使用括号符号来访问valuesRequired上的item.name。

What you want is the following (JSFiddle Link):

Vue.js脚本设置：

new Vue({
  el: "#app",
  data: {
    item: {
      name: 'foo'
    },
    valuesRequired: {
      foo: 'bar',
      baz: 'faz'
    }
  }
})

Vue.js HTML模板：

<div id="app">
  <input type='text' v-model='valuesRequired[item.name]' />
  <p>
    {{valuesRequired}}
  </p>
</div>