如何使用Vue.js在计算函数中访问数组数据

Question

I am new to Vue.js and I can't seem to figure out how to change the format of data. Currently it's using the following structure.

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

I want to change the data to the following, or some variation thereof, but it doesn't work.

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)
    }
  }
})

What am I missing?

Answer 1

You have to update properties in v-model directives, too.

<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>

This ansewers your question. However, your data structure seems wired. Why you need a array here while you sum only first product? Your total computed property do not sum all other products anyway.