Question

我以编程方式更改了v模型。如何更新附加的其他输入？是以双向标记它还是强制渲染？

HTML：

<body>
  <div id='app'>
    <div v-for='item in items'>
      <input type='checkbox' v-on:change='check(item,$event)' v-model='item.checked'/>
    </div>
  </div>
</body>

的javascript：

var app=new Vue({
    el: '#app',
  data: {
    items: [
        {'checked': true},
      {'checked': true}
    ]
  },
  methods: {
    check: function(item, event) {
        var newlyChecked = event.srcElement.checked;

      for (var i = 0; i < items.length; i++) {
        items[i].checked = newlyChecked;
      }
    }
  }
})

小提琴示例：https://jsfiddle.net/w5c6b7kt/1/

目标（对于此示例）是在更改一个复选框时检查或取消选中所有其他复选框。

Answer 1

如果在调试复选框时检查控制台，则可以看到出现错误：

未捕获的ReferenceError：未定义项目

这是因为您必须通过this引用Vue对象，以便在您使用该对象的方法时访问和更改其属性：

for (var i = 0; i < this.items.length; i++) {
  this.items[i].checked = newlyChecked;
}

工作小提琴：https://jsfiddle.net/w5c6b7kt/2/

Vue2：从程序化v模型更改中更新其他表单输入？

1 个答案: