綁定相同的類和事件到多個動態生成的元素

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

你的方法爲n OT好：被PHP產生<li>。

你應該通過$項目爲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;}), 
    } 
}); 

在您的演示THRE

Answer 2

只是想法的演示，如果你正在使用的物品所有人的陣列需要定製「showItems」所以這是一個演示代碼（不TESTD，總部設在你的）：

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

endforeach 

而在methos切換：

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

當然，Vue公司是根據不同的，這不是代碼，做工精細，但給你的想法會碰巧