Обработка событий кликов в списке

Question

Вот ToDoList из примеров Vue.

Я хочу добавить некоторые дополнительные функции в это небольшое приложение, например, установить дату для задания.Поэтому я хотел бы показать больше операций задачи, когда я нажимаю «...».

Ниже я хочу избежать того, что после нажатия другой задачи предыдущее действие по щелчку не удаляется:

Я пытаюсь добавить свойство для каждой задачи и привязать функцию щелчка к «...» (подробнее).Каждый раз, нажимая «больше», сначала устанавливайте для свойства «isMoreClick» для всей задачи значение false, а затем переключайте значение «isMoreClick» для текущей выбранной задачи:

<button class="more"
  @click="isMoreClick(todo)"
  v-show="!todo.isMoreClick">
</button>
<div class="more-opt" v-show="todo.isMoreClick">
  <button class="destroy" @click="removeTodo(todo)"></button>
</div>

...

this.todos.push({
  id: todoStorage.uid++,
  title: value,
  completed: false,
  isMoreClick: false // this is what I added
})

...

isMoreClick (todo) {
  this.todos.forEach(todo => {
    todo.isMoreClick = false
  })
  todo.isMoreClick = !todo.isMoreClick
}

Я думаю, что мой подход немного глуп.Есть ли лучшее решение?(установить символ флага?)

Answer 1

Вы не говорите, как вы визуализируете элементы todo.Но если вы используете цикл v-for, одним из подходов может быть

<ul>
    <li
        v-for="(todo, index) in todos"
        :key="index"
    >
        {{todo.whatever}}
        <button 
            v-if="index !== visibleTodoIndex"
            class="more"
            @click="visibleTodoIndex = index"
        />
        <div 
            v-else
            class="more-opt"
        >
            <button 
                class="destroy" 
                @click="visibleTodoIndex = -1"
            />
        </div>
    </li>
<ul>

Затем просто добавьте visibleTodoIndex к data.

компонента.

Answer 2

Мне кажется, вам нужно использовать глобальную переменную, доступную из всех задач, а не иметь локальную переменную внутри каждой задачи и обновлять ее везде каждый раз.Я рекомендую использовать vuex сохранить и обновить значение isMoreClick с помощью мутаций.