javascript - 处理列表中的点击事件

Question

这是来自 Vue 示例的ToDoList 。

我想为这个小应用程序添加一些额外的功能，例如为任务设置日期。因此，当我单击“...”时，我想显示任务的更多操作。

以下是我要避免的，单击另一个任务后，之前的单击操作不会被删除：

我尝试为每个待办事项添加一个属性，并在“...”（更多）上绑定一个点击功能。每次点击“更多”，首先将所有任务的“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

在我看来，您需要使用一个可从所有待办事项访问的全局变量，而不是在每个待办事项中都有一个局部变量并且每次都在各处更新它。我建议通过突变使用vuex存储和更新值。isMoreClick

Answer 2

你没有说你是如何渲染 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.