показать элемент в списке v-for: VueJS
У меня есть v-для которого отображаются все мои элементы, и у меня есть панель для каждого элемента (для изменения и удаления), но когда я нажимаю на эту кнопку, чтобы отобразить мою панель, она появляется на всех моих элементах. Как я могу этого избежать ? Это то же самое, когда я нажимаю на кнопку Изменить, вход для изменения моего элемента появляется на каждом элементе.
Вот мой код :
<div v-for="(comment, index) in comments" :list="index" :key="comment">
<div v-on:click="show = !show">
<div v-if="show">
<button @click="edit(comment), active = !active, inactive = !inactive">
Modify
</button>
<button @click="deleteComment(comment)">
Delete
</button>
</div>
</div>
<div>
<p :class="{ active: active }">
{{ comment.content }}
</p>
<input :class="{ inactive: inactive }" type="text" v-model="comment.content" @keyup.enter="doneEdit">
</div>
</div>
А также методы и данные :
data() {
return {
show: false,
editing: null,
active: true,
inactive: true
}
},
methods: {
edit(comment) {
this.editing = comment
this.oldComment = comment.content
},
doneEdit() {
this.editing = null
this.active = true
this.inactive = true
}
}
Ответы - показать элемент в списке v-for: VueJS / show element in v-for list: VueJS
03.01.2020 08:39:46
У вас есть то же show, editing, activeи inactiveсостояние для всех элементов. Поэтому, если вы измените какое-то свойство данных для одного элемента, оно изменится для всех.
Есть много способов добиться того, чего вы хотите.
Проще всего управлять данными по индексу. Например:
<div v-on:click="showIndex = index">
<div v-if="showIndex === index">
...
data () {
return {
showIndex: null
...
Основная проблема при таком подходе-вы можете показать/отредактировать только один элемент одновременно.
Если вам нужна более сложная логика и вы хотите управлять более чем одним элементом одновременно, я предлагаю создать отдельный компонент для ваших элементов, и каждый будет иметь свое состояние ( show, editingи т. д.)
03.01.2020 08:48:48
Подход @NaN работает, если вы хотите иметь только один открытый в то время. Если вы хотите иметь возможность иметь несколько открытых одновременно, вам нужно будет отслеживать каждый отдельный элемент. Прямо сейчас вы только основываете его на show. Который может быть только true/falseдля всех элементов одновременно.
Так вот что вам нужно сделать:
Изменить showс логического на массив
data() {
return {
show: [],
editing: null,
active: true,
inactive: true,
}
},
Затем вы можете отслеживать, какой элемент должен иметь панель или нет:
<div v-on:click="toggleActive(index)">
А сам метод:
methods: {
toggleActive(index) {
if (this.show.includes(index)) {
this.show = this.show.filter(entry => entry !== index);
return;
}
this.show.push(index);
}
}
и наконец, v-if будет:
<div v-if="show.includes(index)">