Vue.js 2ループされた要素のクラスを動的に追加および削除する

Question

vue.jsを使用して画像のレイヤーを追加および削除する必要があるプロジェクトがあります。2.トッピングを追加する必要があるピザを構築しています。私の現在のソリューションには欠陥があります。新しいものを追加すると、他のすべての要素/ピザトッピングが削除されます。

トッピングは、ループする配列から生成されます。

私はこれが簡単だと確信していますが、私はvue.jsの新人です。私はすでに何時間も苦労しています...ありがとう！

<div id="app" class="container-fluid"> 
     <div class="row"> 
      <div class="left-container"> 
       <h2>add your ingredients:</h2> 
       <div v-for="(item, index) in pizzas" v-bind:key="index"> 
       <button class="btn btn-primary" v-on:click="show == index ? show = -1 : show = index">{{ item.pizza }}</button> 
       </div> 
       <div class="submit-buttons"> 
        <button class="btn btn-primary reset-pizza" v-on:click="show = -1">Reset pizza</button> 
        <a href="http://fb.com" target="_blank"><button class="btn btn-primary submit-pizza">Share pizza</button></a> 
       </div> 
      </div> 
      <div class="right-container"> 
       <ul class="pizza-layers"> 
       <li v-for="(item, index) in pizzas" class="pizza-canvas" v-bind:class="item.class" v-if="show == index"></li> 
       <li class="pizza-canvas pizza-canvas--topping-base"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

<script> 
new Vue({ 
    el: '#app', 
    data: { 
     pizzas: [ 
     { pizza: 'Salami', class: 'pizza-canvas--topping-salami' },   
     { pizza: 'Rucolla', class: 'pizza-canvas--topping-rucolla' }, 
     { pizza: 'Cheese', class: 'pizza-canvas--topping-cheese' } 
     ], 
     show: {}, 
    }, 
    }) 
</script> 

Answer 1

this.showが配列の代わりにオブジェクトでなければならない、複数のトッピングを可能にします。

これを変更したら、トッピングがすでにshowの一部であるかどうかに基づいて、トッピングを追加/削除するために、クリックイベントハンドラを変更する必要があります。

また、トッピングを表示している間は、this.showが配列なのでshow == indexの代わりにshow.includes(index)を使用してその存在を確認する必要があります。

以下のスニペットでは、これらの変更を適用し、いくつかの背景色を追加して、トッピングが追加または削除される様子を視覚化しました。魔法のように

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    pizzas: [{ 
 
     pizza: 'Salami', 
 
     class: 'pizza-canvas--topping-salami' 
 
     }, 
 
     { 
 
     pizza: 'Rucolla', 
 
     class: 'pizza-canvas--topping-rucolla' 
 
     }, 
 
     { 
 
     pizza: 'Cheese', 
 
     class: 'pizza-canvas--topping-cheese' 
 
     } 
 
    ], 
 
    show: [], 
 
    }, 
 
    methods: { 
 
    addTopping(event, item, index) { 
 
     if(this.show.includes(index)) { 
 
     this.show.splice(this.show.indexOf(index),1); 
 
     } else { 
 
     this.show.push(index); 
 
     } 
 
    } 
 
    } 
 
})

.pizza-canvas--topping-salami { 
 
    background-color: red; 
 
} 
 

 
.pizza-canvas--topping-rucolla { 
 
    background-color: yellow; 
 
} 
 

 
.pizza-canvas--topping-cheese { 
 
    background-color: blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<div id="app" class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="left-container"> 
 
     <h2>add your ingredients:</h2> 
 
     <div v-for="(item, index) in pizzas" v-bind:key="index"> 
 
     <button class="btn btn-primary" v-on:click="addTopping(event, item, index)">{{ item.pizza }}</button> 
 
     </div> 
 
     <div class="submit-buttons"> 
 
     <button class="btn btn-primary reset-pizza" v-on:click="show = []">Reset pizza</button> 
 
     <a href="http://fb.com" target="_blank"><button class="btn btn-primary submit-pizza">Share pizza</button></a> 
 
     </div> 
 
    </div> 
 
    <div class="right-container"> 
 
     <ul class="pizza-layers"> 
 
     <li v-for="(item, index) in pizzas" class="pizza-canvas" v-bind:class="item.class" v-if="show.includes(index)"></li> 
 
     <li class="pizza-canvas pizza-canvas--topping-base"></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>