如何使用Vue.js訪問計算函數中的數組數據

Question

我是Vue.js的新手，我似乎無法弄清楚如何更改數據格式。目前它使用以下結構。

app.js：

new Vue({ 
    el: '#app', 
    data: { 
    price: 0, 
    shipping: 0, 
    handling: 0, 
    discount: 0 
    }, 
    computed: { 
    total: function() { 
     return ((
     this.price * 100 + 
     this.shipping * 100 + 
     this.handling * 100 - 
     this.discount * 100 
    )/100).toFixed(2) 
    } 
    } 
}) 

的index.html：

<div id="app" class="row"> 
    <currency-input label="Price" v-model="price"></currency-input> 
    <currency-input label="Shipping" v-model="shipping"></currency-input> 
    <currency-input label="Handling" v-model="handling"></currency-input> 
    <currency-input label="Discount" v-model="discount"></currency-input> 

    <p class="medium-12 columns">Total: ${{ total }}</p> 
</div> 

http://codepen.io/pixelasticity/pen/rjeVgz

我想將數據改變爲以下，或一些變體，但它不」工作。

app.js：

new Vue({ 
    el: '#app', 
    data: { 
    products: [ 
     { 
     price: 0, 
     shipping: 0, 
     handling: 0, 
     discount: 0 
     } 
    ] 
    }, 
    computed: { 
    total: function() { 
     return ((
     this.products[0].price * 100 + 
     this.products[0].shipping * 100 + 
     this.products[0].handling * 100 - 
     this.products[0].discount * 100 
    )/100).toFixed(2) 
    } 
    } 
}) 

我缺少什麼？

Answer 1

您還必須更新v-model指令中的屬性。

<currency-input label="Price" v-model="products[0].price"></currency-input> 
<currency-input label="Shipping" v-model="products[0].shipping"></currency-input> 
<currency-input label="Handling" v-model="products[0].handling"></currency-input> 
<currency-input label="Discount" v-model="products[0].discount"></currency-input> 

這個問題反映了你的問題。但是，您的數據結構似乎有線。爲什麼你需要一個數組，而你只求和第一個產品？無論如何，你的total計算出來的財產並沒有總結所有其他產品。