Javascript 在Vue.js中切换过滤结果时的奇怪行为

我有一个元素列表{name:'bla'，done:false}，它被done属性过滤以显示

[_] element1
[_] element2

当我点击一个复选框时，属性done被更改，因此这个元素消失了。奇怪的是，当我单击第一个元素时，它消失了，第二个元素显示出来，但选中了一个复选框

[v] element2 

注意-元素是可见的，它是正常的，但不知何故检查为不正常

如何避免这种情况？我不想要没有点击的支票。我甚至不知道，谷歌用了什么词，这样一个奇怪的例子：

一个bug的工作示例-。另一个问题是，它在SO中作为一个片段正常工作，但在JSFIDLE和我的应用程序中出错

注意：下面您可以看到所需的行为。拨弄错误

新Vue{ el:应用程序， 计算：{ todosfiltered:函数{ 返回this.todos.filterfunctionelem{ 返回！elem.done； }; }, }, 数据：{ 待办事项：[ {text:Learn JavaScript，done:false，tip:true}， {text:learnvue2，done:false，tip:false，}， {text:Play-around-in-JSFiddle，done:true，tip:false}， {text:buildsomesome，done:true，tip:false} ] }, 方法：{ 切换：functiontodo{ todo.done=！todo.done } } } 身体{ 背景：20262E； 填充：20px； 字体系列：Helvetica； } 应用程序{ 背景：fff； 边界半径：4px； 填充：20px； 过渡：均为0.2s； } 李{ 利润率：8px0； } 氢{ 字体大小：粗体； 边缘底部：15px； } 德尔{ 颜色：rgba0,0,0,0.3； } 待办事项： {{todo.text}} {{todo.text}} 过滤元素： {{todo.text}} {{todo.text}}-单击此复选框

---

在本例中，这是由于缺少正在循环的元素上的属性造成的。始终包含一个密钥以防止此类问题，并确保该密钥是唯一的

我在这里使用todo.text，但是如果文本不是唯一的，您可能会遇到相同的渲染错误。相反，您可能需要添加一个id属性来区分它们

<h2>
  filtered elements:
  </h2>
  <ol>
    <li v-for="todo in todosfiltered" :key="todo.text">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }} <span v-if="todo.tip">&lt;-- click this checbox</span>
        </span>
      </label>
    </li>
  </ol>

---

最后，可以使用for循环的索引，但由于Vuejs的处理方式，这不是最佳的。使用索引时，从列表中删除某个元素将导致该元素之后所有元素的索引发生更改，从而强制对所有元素重新排序。这对于较小的数据集并不重要，但会对较大的列表产生影响。

在这种情况下，这是由于缺少循环元素上的属性造成的。始终包含一个密钥以防止此类问题，并确保该密钥是唯一的

我在这里使用todo.text，但是如果文本不是唯一的，您可能会遇到相同的渲染错误。相反，您可能需要添加一个id属性来区分它们

<h2>
  filtered elements:
  </h2>
  <ol>
    <li v-for="todo in todosfiltered" :key="todo.text">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }} <span v-if="todo.tip">&lt;-- click this checbox</span>
        </span>
      </label>
    </li>
  </ol>

---

最后，可以使用for循环的索引，但由于Vuejs的处理方式，这不是最佳的。使用索引时，从列表中删除某个元素将导致该元素之后所有元素的索引发生更改，从而强制对所有元素重新排序。这对于较小的数据集并不重要，但可能会对较大的列表产生影响。

很难说。可能是Vue版本，也可能是堆栈溢出如何包装代码段。作为一般规则，总是包括它以防止任何未定义的行为，并且只有当你有非常令人信服的理由时才忽略它。这很难说。可能是Vue版本，也可能是堆栈溢出如何包装代码段。作为一般规则，始终包括它以防止任何未定义的行为，并且只有在有非常令人信服的理由时才忽略它。