[英]Vue.js 2 dynamically adding and removing classes in looped elements
I have a project here where I need to add and remove layers of images, using vue.js 2. I am building up a pizza where I need to add toppings. 我在这里有一个项目,需要使用vue.js 2添加和删除图像层。我正在构建一个披萨,需要在其中添加浇头。 My current solution has a flaw - it removes all other elements/ pizza toppings when I add a new one. 我当前的解决方案有一个缺陷-当我添加一个新的解决方案时,它会删除所有其他元素/比萨饼配料。
The toppings are generated from an array which I loop through. 浇头是从我循环经过的数组中生成的。
Can you please help, I am sure this is easy but me being a rookie in vue.js I have already struggled for hours... Thanks! 您能帮忙吗,我确定这很容易,但是我是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>
To allow for multiple toppings, this.show
should be an array, instead of an object. 为了允许多个浇头, this.show
应该是一个数组,而不是一个对象。
Once you change that, you'd need to modify the click event handler to add/remove the topping based on whether or not the topping is already part of show
. 更改后,您需要修改click事件处理程序,以根据浇头是否已经成为show
一部分来添加/删除浇头。
Also, while displaying the topping, you'd need to check its existence using show.includes(index)
instead of show == index
- since this.show
is an array. 另外,在显示顶部时,您需要使用show.includes(index)
而不是show == index
来检查其存在-因为this.show
是一个数组。
In the snippet below, I've applied these changes, and added some background colors to visualize how the toppings are added or removed. 在下面的代码段中,我应用了这些更改,并添加了一些背景颜色以可视化如何添加或删除浇头。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.