请教各位前辈，为什么computed的属性没能实时更新？_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

下面是自己写的一个小例子，
为什么点击购买数量的+ - 后，数量值变更了，却没用相应到下面的总价呢？
麻烦各位大声帮忙看下，非常感谢！！！

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js v-for</title>
  <script src="/uploads/allimg/210409/23245914C-0.jpg"></script>
</head>

<body>
  <div id="app">
    <h1>{{ttl}}</h1>
    <table>
      <tr>
        <th v-for="item in scarTh">{{item}}</th>
      </tr>
      <tr v-for="item in bookInfo" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>￥{{item.price}}</td>
        <td><button @click="item.number > 0 ? item.number -=1 : item.number = 0">-</button> {{item.number}} <button
            @click="item.number +=1">+</button></td>
        <td><button>{{item.paly}}</button></td>
      </tr>
    </table>
    <p>总价：￥{{total}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        ttl: '图书馆购物车',
        scarTh: ['', '书籍名称', '出版日期', '价格', '购买数量', '操作'],
        bookInfo: [{
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.00,
            number: 0,
            paly: '移除'
          },
          {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-2',
            price: 59.00,
            number: 0,
            paly: '移除'
          },
          {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.00,
            number: 0,
            paly: '移除'
          },
          {
            id: 4,
            name: '《vue.js》',
            date: '2018-10',
            price: 69.00,
            number: 0,
            paly: '移除'
          },
          {
            id: 5,
            name: '《java基础》',
            date: '2020-1',
            price: 109.00,
            number: 0,
            paly: '移除'
          }
        ]
      },
      computed: {
        total() {
          let itemPrice = 0
          for(i = 0 ; i< this.bookInfo.length ; i++){
            itemPrice = this.bookInfo[i].price * this.bookInfo[i].number;
          }
          return itemPrice
        }
      }
    })
  </script>
</body>

</html>

###

大哥，你代码写错了。。。

// 少了个+号
itemPrice += this.bookInfo[i].price * this.bookInfo[i].number;