Vue js购物车

Question

I'm building a shopping cart in Vue.js with Vuetify.

I don't know how to obtain the boolean value true/false and add the price to the amount value if it's true or remove the price if it's false. Does anyone have any suggestion?

<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

Your boolean value is stored in ingredient.checked , and you can use it to control display of the price with either v-if or v-show :

<v-subheader v-if="ingredient.checked">{{ingredient.price}} €</v-subheader>

Then there's just one small change needed to calculate the total value (assuming you only want to add the price of checked items):

   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;
        }
    },

...and display the computed value just like any other variable:

<h3 class="headline mb-0">Total price: {{total}}</h3>