v-for

修改对象数组中某属性值，自动响应

by li gang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.name">
        {{item.name}} - {{item.age}}
      </li>
    </ul>
    <input type="text" v-model="list[0].name">
  </div>
</body>

JavaScript

const app = new Vue({
  el: '#app',
  data() {
    return {
      list: [{
        name: 'lg',
        age: 27
      }, {
        name: 'camile',
        age: 27
      }]
    }
  }
})