Question

我在Vue.js用Vuetify建立购物车。

我不知道如何获取布尔值true / 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>

Vue js购物车

1 个答案: