Vue js Shopping cart

Question

我正在用vuetify在vue.js建造购物车。

我不知道如何获得布尔值为true/false，如果是false，则将价格添加到amount值中，或删除价格。有人有建议吗？

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

Answer 1

您的布尔值存储在ingredient.checked中，您可以使用它来控制使用v-if或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>