[英]Vue js Shopping cart
我正在使用Vuetify在Vue.js中構建購物車。
我不知道如何獲取布爾值true / false,如果價格為true,則將價格添加到amount
值中;如果價格為false,則不刪除價格。 有人有什么建議嗎?
<v-container grid-list-md text-xs-center>
<v-card class="">
<h2 class="headline mb-0">Extra ingredients:</h2>
<v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id">
<v-layout column>
<v-flex xs6>
<v-checkbox name="checkbox" color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="ingredient.checked" light></v-checkbox>
</v-flex>
</v-layout>
<v-layout column>
<v-flex xs6>
<v-subheader>{{ingredient.price}} €</v-subheader>
</v-flex>
</v-layout>
</v-layout>
<v-divider></v-divider>
<v-layout row wrap class="mb-3">
<v-flex xs6>
<h3 class="headline mb-0">Total price:</h3>
</v-flex>
</v-layout>
</v-card>
</v-layout>
<script>
export default {
data: () => ({
checked1: '',
ingredients: [{
id: 1,
name: "cheese",
price: 2,
checked: '',
}, {
id: 2,
name: "ham",
price: 2.0,
checked: '',
}, {
id: 3,
name: "Bacon",
price: 2.25,
checked: '',
}, {
id: 4,
name: "spinac",
price: 1.6,
checked: '',
}, {
id: 5,
name: "extracheese",
price: 2.5,
checked: '',
}, {
id: 6,
name: "pepper",
price: 2.75,
checked: '',
}],
}),
computed: {
total() {
var total = 0;
for (var i = 0; i < this.ingredients.length; i++) {
total += this.ingredients[i].price;
}
return total;
}
},
methods: {
addToCart(item){
amount = 0;
if(ingredient.checked == true){
amount += ingredient.price;
}
else {
amount -= ingredient.price;
}
}
}
}
</script>
您的布爾值存儲在ingredient.checked
,您可以使用它通過v-if
或v-show
控制價格v-show
:
<v-subheader v-if="ingredient.checked">{{ingredient.price}} €</v-subheader>
然后,只需要進行一個很小的更改即可計算出總價值(假設您只想添加已檢查商品的價格):
computed: {
total() {
var total = 0;
for (var i = 0; i < this.ingredients.length; i++) {
if (this.ingredients[i].checked) { // <-- this is new
total += this.ingredients[i].price;
}
}
return total;
}
},
...並像其他任何變量一樣顯示計算出的值:
<h3 class="headline mb-0">Total price: {{total}}</h3>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.