希望這個問題有點道理。我正在使用 Vue JS，并且使用 v-for 回圈的元素很少。在回圈的每個元素塊內，有一個按鈕和一個 div。在這種情況下，我的回圈運行了 3 次。這意味著我在每個回圈的代碼塊中得到三個按鈕，以及這三個 div。
當我單擊三個按鈕之一時，我希望該塊中的 div 動態接收一個類。但是，就目前而言，當我單擊三個按鈕之一時，會添加該類，但它會被添加到回圈內的所有三個回圈 div 元素中。
我怎樣才能讓當前回圈的 div 只在點擊相關按鈕時接收特定的類，而回圈中的其他兩個 div 也不會接收它？
到目前為止，這是我自己嘗試過的代碼：
<template>
<div v-for="(todo, index) in todos" :key="index" class="relative">
<button @click="showDiv">
show div
</button>
<div :class="appear" class="absolute bg-red-500">
<p>{{ todo.text }}</p>
</div>
</div>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
data() {
return {
appear: 'left-0',
todos: [
{ text: 'Learn Laravel' },
{ text: 'Learn Vue JS' },
{ text: 'Learn Tailwind CSS' },
]
}
},
methods: {
showDiv() {
this.appear = 'left-2/4';
}
}
})
</script>
uj5u.com熱心網友回復：
發生這種情況是因為您的所有代碼都在同一“級別”（或更具技術性的范圍）運行，因此 DOM“認為”所有元素都應該將類添加到其中。您可以通過簡單地為重復的代碼位創建一個新組件（例如當您需要 for 回圈時）并使用 Vue 的插槽 ( https://vuejs.org/v2/guide/components-slots.js ) 來輕松解決此問題。 html ) 功能。
// corresponding example JS file or section (depending on your setup) for TodoListItem
export default {
name: 'TodoListItem',
props: {
todo: { type: Object, requried: true }
},
data() {
return {
isClicked: false
}
},
methods: {
toggleIsClicked() {
this.isClicked = !this.isClicked;
},
},
};<!-- index.html -->
<todo-list>
<todo-list-item
v-for="(todo, index) in todos"
:key="index"
:todo="todo"
></todo-list-item>
</todo-list>
<!-- TodoList.vue -->
<template>
<div class="todo-container">
<slot></slot>
</div>
</template>
<!-- TodoListItem.vue -->
<!-- Don't forget to set your props in the corresponding component JS file or else your TodoListItem.vue won't know about the todo object you are passing down to it. -->
<!-- You will also need to move your @click handler here too in the methods section -->
<template>
<div class="relative">
<button @click="showDiv">show div</button>
<div :class="appear" class="absolute bg-red-500">
<p>{{ todo.text }}</p>
</div>
</div>
</template>我希望這可以幫助我的朋友！
uj5u.com熱心網友回復：
原因是您使用一個變數appear來管理所有按鈕的狀態，而您可以維護visible為每個專案呼叫的單獨布林值
檢查以下作業示例
var app = new Vue({
el: "#app",
data() {
return {
appear: 'left-0',
/*** Change added to below array ***/
todos: [
{ text: 'Learn Laravel', visible: false },
{ text: 'Learn Vue JS', visible: false },
{ text: 'Learn Tailwind CSS', visible: false },
]
}
},
/** Changes added below **/
computed: {
getButtonText() {
return ind => {
return this.todos[ind].visible ? 'hide div': 'show div';
}
},
getClass() {
return ind => {
return this.todos[ind].visible ? 'left-2/4': 'absolute bg-red-500';
}
}
},
methods: {
showDiv(index) {
this.todos[index].visible = !this.todos[index].visible; // Change added
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(todo, index) in todos" :key="index" class="relative">
<button @click="showDiv(index)">
{{getButtonText(index)}} <!-- Change added -->
</button>
<div :class="getClass(index)"> <!-- Change added -->
<p>{{ todo.text }}</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
在陣列中添加一個布爾欄位并將該欄位用作動態類的條件，例如
{ text: 'Learn Laravel', isLeft: false },
{ text: 'Learn Vue JS', isLeft: false },
{ text: 'Learn Tailwind CSS', isLeft: false },
現在點擊，只需切換 isLeft 欄位并將其用作動態類的條件
<div v-for="(todo, index) in todos" :key="index" class="relative">
<button @click="todo.isLeft = !todo.isLeft">
show div
</button>
<div :class="{'left-2/4': todo.isLeft}" class="absolute bg-red-500">
<p>{{ todo.text }}</p>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371639.html