Question

我正在动态绑定到Vue.js 2.0应用程序中的对象数组。我想响应更改，因为该数组中的值发生了变化。目前，如Fiddle所示，我有以下内容：

HTML

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(col, index) in cols">
          <input :placeholder="col.title" v-model="inputValues[col.prop]" />
        </th>        
      </tr>
    </thead>

    <tbody>
      <tr v-for="(item, index) in items">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.birthday }}</td>
      </tr>
    </tbody>
  </table>

  <hr />
  <textarea>{{ inputValues }}</textarea>
</div>

的javascript

new Vue({
  el: '#app',
  data: {
    cols: [
      { title: 'Name', prop:'name' },
      { title: 'Age', prop:'age' },
      { title: 'Birthday', prop:'birthday' },      
    ],

    inputValues: [],

    items: [
      { id:1, name:'Andreas Winchell', age:47, birthday:'08-04-1970' },
      { id:2, name:'Victoria Hodges', age:80, birthday:'01-24-1937' },      
      { id:2, name:'James Morris', age:59, birthday:'06-14-1958' },      
      { id:2, name:'Larry Walker', age:68, birthday:'08-07-1949' },      
      { id:2, name:'Lee Maynard', age:46, birthday:'04-17-1971' } 
    ]
  },

  methods: {
    buttonClick: function() {
      alert(JSON.stringify(this.inputValues));
    }
  }
})

我似乎找不到一种方法来绑定输入到标题中的任何值的更改。如何检测并响应数组中的属性值更改？

Answer 1

inputValues应该是一个对象，而不是一个数组。

data: {
  cols: [
    { title: 'Name', prop:'name' },
    { title: 'Age', prop:'age' },
    { title: 'Birthday', prop:'birthday' },      
  ],
  // inputValues should be an object.    
  inputValues: {name: null, age: null, birthday: null },

  items: [
    { id:1, name:'Andreas Winchell', age:47, birthday:'08-04-1970' },
    { id:2, name:'Victoria Hodges', age:80, birthday:'01-24-1937' },      
    { id:2, name:'James Morris', age:59, birthday:'06-14-1958' },      
    { id:2, name:'Larry Walker', age:68, birthday:'08-07-1949' },      
    { id:2, name:'Lee Maynard', age:46, birthday:'04-17-1971' } 
  ]
}

Answer 2

您可以在数据中使用数组，但 Vue will not detect direct changes to the array referencing an item by its index 。 Vue将检测使用push（），pop（），slice（）等进行的更改。

像'Cols'这样的阵容是一场灾难。 “姓名”，“年龄”和“生日”是代码（属性名称），而不是数据。你真的不想迭代生成这样的表格的数组。保持简单并编码您的三个输入。

Answer 3

如here in the VueJS documentation.

所述

由于JavaScript的限制，Vue无法检测到对数组的以下更改：

直接用索引设置项目时，例如

vm.items[indexOfItem] = newValue

为克服此问题，以下两项将与vm.items[indexOfItem] = newValue相同，但也会在反应性系统中触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Vue.js - 检测嵌套的属性值更改

3 个答案: