处理列表中的点击事件答案

【问题标题】：Handle click events in a list处理列表中的点击事件
【发布时间】：2019-02-01 20:23:13
【问题描述】：

这是来自 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
}

我认为我的方法有点愚蠢。有没有更好的解决方案？（设置标志符号？）

【问题讨论】：

标签： javascript vue.js ecmascript-6 frontend

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：