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的一部分来添加/删除顶部。

此外，在显示顶部时，您需要使用show.includes(index)而不是show == index检查其存在 - 因为this.show是一个数组。

在下面的代码段中，我已应用这些更改，并添加了一些背景颜色，以显示添加或删除配料的方式。

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>

Vue.js 2动态添加和删除循环元素中的类

1 个答案: