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 Demo

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

只是这个想法的演示，如果你使用的是一系列项目，每个人都需要自定义＆＃34; showItems＆＃34;所以这是一个演示代码（没有测试，基于你的）：

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下是不同的，这个代码不能正常工作，但是会让你知道它会发生吗

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

2 个答案: