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

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

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

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>

---

我遗漏了什么？

您还必须更新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

computed属性不会对所有其他产品求和。

为什么要将数据更改为产品数组？这样我就可以拥有多个价格不同但仍可调整的产品、运费和折扣。实际上我想在子组件中输入价格。谢谢。我知道这一定是很明显的事情。我希望它格式化的原因是，我可以有不同的默认价格和运费的多个产品。