Question

从这个小例子开始，我正在迈出第一步。我正在尝试根据提供的数据来实现各项目的总和。（完整的示例可以在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。当通过v-bind：items提供商品数组时，似乎从未设置过商品数组（它不是无功的吗？）。我先感谢您的帮助。

编辑：背景

所有将用于组件的数据均来自PHP纯文件。 CRUD操作尚不可用。表示非常重要的一点是，可以直接从标签绑定数据。

Answer 1

您的计算总价的函数使用在视图的数据标签中声明的item对象。由于其为空，价格始终为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/

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

编辑：背景

1 个答案: