javascript - Vue.js - 检测嵌套属性值的变化

Question

我动态绑定(bind)到 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));
    }
  }
})

我似乎无法找到一种方法来绑定(bind)到 header 中输入的任何值的更改。如何检测数组中属性值的变化并使用react？

Answer 1

2022 年更新

Vue 3 将检测 react 数组中的所有变化。方括号语法不再是限制。

---

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

像“Cols”这样的数组是一场灾难。 “姓名”、“年龄”和“生日”是代码(属性名称)，而不是数据。您真的不想遍历数组生成这样的表单。保持简单并对您的三个输入进行编码。