将相同的类和事件绑定到多个动态生成的元素

Question

我有以下HTML结构：

<a href="#" @click.prevent="toggleClass">Show/Hide</a><br>
<li :class="{myClass: showItems}">Item 1</li>

<a href="#" @click.prevent="toggleClass">Show/Hide</a><br>
<li :class="{myClass: showItems}">Item 2</li>

<a href="#" @click.prevent="toggleClass">Show/Hide</a>
<li :class="{myClass: showItems}">Item 3</li>

和JS：

new Vue({
  el: '#app',
  data: {
    showItems: true
  },
  methods: {
    toggleClass: function(){
      this.showItems = !this.showItems;
    }
  }
});

当我单击任一<a>元素时，将执行toggleClass()方法，该方法将showItems设置为true或false ，最终将其应用于所有元素。 并且由于<li>元素是通过php foreach循环动态生成的，因此我无法手动控制该元素的类名。

在for循环中，HTML结构可能如下所示：

foreach($items as $item):
    <a href="#" @click.prevent="toggleClass">Show/Hide</a><br>
    <li :class="{myClass: showItems}">Item $item</li>
endforeach

我该如何处理这种情况？ 这是一个JSBin演示

Answer 1

您的方法不好： 由php生成<li> 。

您应该将$ items作为json传递给客户端，然后通过v-for渲染它们

HTML：

<script>
    window.vueData = {items: <?php echo json_encode($items) ?>}
</script>
<ul>
    <li v-for="(item,index) in items">
        <span :class="{myClass: showItems[index]}">item {{ item }}<span>
        <a href="#" @click.prevent="showItems[index] = !showItems[index]">Show/Hide</a>
    </li>
</ul>

JS

  new Vue({
  el: '#app',
  data: {
    items: window.vueData.items,
    showItems: window.vueData.items.map(() => {return true;}),
  }
});

Answer 2

只是一个演示，如果您使用的是每个人都需要自定义“ showItems”的项目数组，那么这是一个演示代码（未经测试，基于您的代码）：

foreach($items as $item):
    <a href="#" @click.prevent="toggleClass($item)">Show/Hide</a><br>
    <li :class="{myClass: $item.showItems}">Item $item</li>

endforeach

并在方法切换中：

methods: {
    toggleClass: function(item){
      item.showItems = !item.showItems;
    }
  }

当然，在Vue下有所不同，并且此代码无法正常工作，但可以让您了解