Vue - 通过 v-bind 传递的数组在计算属性中为空

Question

我正在从这个小例子开始我在 vue 中的第一步。我正在尝试根据提供的数据来实现项目总和。 （完整的例子可以在this jsffile找到）

组件：

Vue.component('items-table', {
    props: ['items', 'item', 'total'],
    template: `
        <div>
                <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="item of items"
                        v-bind:key="item.id"
                    >
                      <td>{{item.desc}}</td>
                      <td class="price">{{item.price}}</td>
                    </tr>
                </tbody>
            </table>
            
            
            <div>Total items: {{items.length}}</div>
            <div>Total price: {{total}}</div>
        </div>
    `
});

在下面的应用程序中，控制台打印一个空数组，结果总是返回 0：

new Vue({
  el: '#app',
    data:{
        items: []
    },
    computed: {
        total: function(){
            console.log(this.items);
            return this.items.reduce(function(total, item){

                return total + item.price;
            },0);
        }
    },
    mounted() {
        console.log('app mounted');
    }
});

最后，我提供将用于显示、操作和进行一些计算的初始数据：

<div id="app">
  <items-table v-bind:total="total" v-bind:items="[
            { id: 1, desc: 'Banana', price: 10 },
            { id: 2, desc: 'Pen', price: 5 },
            { id: 3, desc: 'Melon', price: 5 }
        ]"></items-table>

</div>

我的问题是 {{total}} 中的价格总和始终为 0。看起来 items 数组在通过 v-bind:items 提供时从未设置（它不是反应式的吗？）。提前感谢您的帮助。

编辑：背景

将用于组件的所有数据都来自 PHP 纯文件。 CRUD 操作尚不可用。说可以直接从标签绑定数据非常重要。

Answer 1

计算总价的函数使用视图数据标签中声明的 items 对象。由于它是空的，因此价格始终为 0。您应该执行以下操作：

    new Vue({
  el: '#app',
    data:{
        items: [
            { id: 1, desc: 'Banana', price: 10 },
            { id: 2, desc: 'Pen', price: 5 },
            { id: 3, desc: 'Melon', price: 5 }
        ]
    },
    computed: {
        total: function(){
            console.log(this.items);
            return this.items.reduce(function(total, item){

                return total + item.price;
            },0);
        }
    },
    mounted() {
        console.log('app mounted');
    }
})

而vue应该更像这样：

    <div id="app">
  <h2>List of items</h2>
  <items-table v-bind:total="total" v-bind={items}></items-table>

</div>

希望它能帮助您解决问题

编辑：JSFiddle：https://jsfiddle.net/eywraw8t/210901/