vue数据未响应式更新

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="example">
    <ul>
      <li v-for="item in books">
        书名:{{item.name}}
        数量:{{item.amount}}
        <button @click="increment(item.amount)">+</button>
      </li>
    </ul>
  </div>
  <script type="text/javascript" src="D:/web/js/vue/vue.js"></script>
  <script>
    var app=new Vue({
      el: "#example",
      data: {
        books: [
          {
            name: 'js',
            amount: 1
          },
          {
            name: 'js',
            amount: 1
          }
        ]
      },
      methods: {
        increment(amount){
          amount++
        }
      }
    })

  </script>
</body>

</html>

 

是因为,js函数是按值传递的?

你测试一下,在amount++执行完毕后,打印一下this.books看看有没有改变??

在button将传值改为<button @click="increment(item)">+</button>;

然后方法 改为 increment(item){tem.amount++},即可响应更新

看文档 数组更新检测 https://cn.vuejs.org/v2/guide/list.html#数组更新检测