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?
