为什么 v-for 只工作一瞬间？

Question

我在 Vue.js 遇到了一个奇怪的问题。不知道是我的错还是bug。

当我使用前面带逗号的 v-for (v-bind) 时，它没有给我任何错误，但它不显示任何内容。当我不使用逗号时，会出现此错误 Elements in iteration expect to have 'v-bind:key' directives.

但是如果我把逗号加回去，它会显示一瞬间，然后就会出现上述行为。

有问题的代码：

<template>
  <div class="outside--wrapper">
      <form action="">
          <p :v-for="element in words1">{{ element }}</p>
      </form>
  </div>
</template>

<script>
export default {
    name: "Crossword",
    data() {
        return {
            words1: {
                1: ["S","i","l","a"],
                2: ["S","i","l","a"],
                3: ["S","i","l","a"],
                4: ["S","i","l","a"],
            },
        }
    },
}
</script>

提前致谢！

Answer 1

:v-for 等同于 v-bind:v-for 错误说列表迭代应该有一个键（v-bind:key 或 :key）

正确的代码是

<p v-for="(elements, key) in words1" :key="key">{{ elements }}</p>

见https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object

为什么 v-for 只工作一瞬间？

Why does v-for work only for a split second?

javascript

vue.js

vue-component

vuejs2