2

我看到 VueJS 和 HTML 无序列表元素存在一个奇怪的问题。所有文件都在我的项目中构建，没有任何错误，但在浏览器中，您在页面上看不到任何内容，并且浏览器控制台中出现错误。

我有一个修复（见下面的代码），但很好奇为什么 VueJS 会抛出这个错误以及 VueJS 如何处理浏览器中的基本列表元素？所以我希望有人可以向我解释这个问题，以充分了解这里真正发生的事情。

我正在使用带有 Snowpack 的 Visual Studio 2019 进行编译

我的 html/模板代码：

<!-- The code that throws error in the browser -->
<ul>
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

<!-- This code fixes error in browser -->
<ul :key="someRandomKey"> <!--<ul v-bind:id="someRandomKey"> also a fix-->
    <li>
        Item One
    </li>
    <li>
        Item Two
    </li>
</ul>

我的 Vue 组件 ts 代码：

import { Component, Prop, Vue } from '/web_modules/vue-property-decorator.js'

import vevraTemplate from '../templates/applyVEVRAA.vue.js';
@Component({ render: vevraTemplate, watch: null })
export default class VEVRAAComponent extends Vue
{
    
}

错误：（我的 vue 组件名称是 'applyVEVRAA.vue.js'） 在此处输入图像描述

4

1 回答 1

0

您向“父”元素添加一个键，以便 Vue 渲染器可以识别它。如果某些内容发生了变化，渲染器就会知道需要更新哪些元素。

在此链接中，解释得更好-> https://www.telerik.com/blogs/in-vue-when-do-i-actually-need-the-key-attribute-and-why。

于 2020-07-24T17:27:59.210 回答