показать элемент в списке v-for: VueJS

показать элемент в списке v-for: VueJS

03.01.2020 08:12:48 Просмотров 43 Источник

У меня есть 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

Является ответом!
NaN

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и т. д.)

https://stackoverflow.com/questions/59582624/show-element-in-v-for-list-vuejs/59582978#comment105382981_59582978
Спасибо за ваш ответ, я проверю это прямо сейчас !
T. Short

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)">
https://stackoverflow.com/questions/59582624/show-element-in-v-for-list-vuejs/59583082#comment105383010_59583082
Метод NaN-это хороший метод, но я проверю ваш и решу, если я возьму ваш или метод NaN, большое спасибо за ваш ответ !
Помочь в развитии проекта:
Закрыть X