По клику показать текущий блок в v-for?

Question

[Nikolino]

Как показать только тот блок description по заголовку которого кликнул? При клике показываются/скрываются все блоки с классом message-body, а нужно скрыть/показать только текущий.

<article class="message" v-for="todo in todos">

  <div class="message-header">
    <p @click="visible = !visible">{{ todo.title }}</p>
    <button class="delete" aria-label="delete" @click="removeToDo(todo)"></button>
  </div>
  
  <div class="message-body" v-if="visible">
  {{ todo.description }}
  </div>

data: {
        visible: false,
        todoTitle: '',
        todoDesc: '',
        todos: [
        {title: "Do something", description: "To do something", completed: false, id: 0},
        {title: "Do something 2", description: "To do something 2", completed: false, id: 1},
        {title: "Do something 3", description: "To do something 3", completed: false, id: 2},
        ]
    },

Answer 1

[mShpakov]

Сделать данные вот так:

data: {
        todoTitle: '',
        todoDesc: '',
        todos: [
        {isOpen:false, title: "Do something", description: "To do something", completed: false, id: 0},
        {isOpen:false, title: "Do something 2", description: "To do something 2", completed: false, id: 1},
        {isOpen:false, title: "Do something 3", description: "To do something 3", completed: false, id: 2},
        ]
    },

А в шаблоне так v-if="todo.isOpen" и так далее

Суть в том что у вас визибл один для всехэлемкнтов списка

Comments

[Nikolino]

Это решение мне приходило в голову, но если объектов будет очень много, зачем в каждом объекте держать isOpen: false? Я думаю как-то по-другому можно сделать.

[mShpakov]

Nikolino, можно через отдельный компонент.
Есть у вас компонент родитель. В нем вы крутите циклом массив ваш (условно так):

<div class="articls">
  <template  v-for="(todo, index) in todos">
    <child-component :todo="todo"/>
  </template>
</div>

И есть ребенок:

<article class="message">
  <div class="message-header">
    <p @click="visible = !visible">{{ todo.title }}</p>
    <button class="delete" aria-label="delete" @click="removeToDo(todo)"></button>
  </div>
  
  <div class="message-body" v-if="visible">
  {{ todo.description }}
  </div>
</article>

И скрипт соответственно будет такой для дочернего

data: {
        visible: false
    },

Писал кратко наспех, надеюсь посыл понятен. Если нет, то скажите, позже на код пене сделаю пример

[Nikolino]

mShpakov, вот пример.
https://jsfiddle.net/L5kjvmc6/

Получается, что если у объекта (таска), изначально свойство completed: true(false) не задано, то кнопка не будет реагировать, если мы просто попытаемся это свойство добавить к объекту таска.

То есть, если у нас допустим есть товары, у которых по клику "В корзину" мы хотим менять название кнопки на "Добавлено", то в свойствах объектов этих товаров обязательно должно быть свойство типа isAdded: false.

То есть если мы будем использовать базу данных, с которых будем тянуть объекты (товары), то обязательно должно быть это поле, которое по умолчанию false везде. И это мне кажется избыточным.

Другой вариант, который еще не тестил, это создать пустой массив, и по клику по кнопке пушить id товара в этот массив, а в v-if проверять находится ли айди данного товара в массиве и если находится, то выводим кнопку с другим названием.

[mShpakov]

Nikolino, воспользуйтесь вариантом как я выше описал
тогда у вас свойство будет генерироваться в компоненте для каждого таска отдельно