Nikolino
@Nikolino

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

Как показать только тот блок 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},
        ]
    },

  • Вопрос задан
  • 193 просмотра
Решения вопроса 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" и так далее

Суть в том что у вас визибл один для всехэлемкнтов списка
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы