关于包含dom元素会出现Warnings while compiling.警告的问题！

2024年2月15日 174次阅读 来源: 蓝调爵士

做路由的时候，我突然有一个想法，这个<router-link></router-link>能不能不仅仅包文字，能不能包含dom元素呢？如果能包dom元素，那它都能包含什么dom呢？
在dom元素里，能跳转的只有a元素，当然a元素是最好的的选择，你要想非要选个span，div之类的，那你可以试试！
文档里面写的是可以在router-link标签里加上tag这个属性来修改它的元素指向，所以我就做成了这样

<router-link tag="li" v-for="(item,index) in x.child" :to="item.link">
        <a href="javascript:void(0)" class="title-list">
        <i class="iconfont icon-jiantou icon-after"></i>
        {{item.title}}
        </a>
</router-link>

虽然不会报错，但是会有

    client?9f7a:147 ./node_modules/_vue-loader@13.5.0@vue-loader/lib/template-compiler?{"id":"data-v-4c018110","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/_vue-loader@13.5.0@vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/aside.vue
    (Emitted value instead of an instance of Error) <router-link v-for="item in x.child">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

这种警告，警告是这样的，然后去官网文档查阅了，说是少了个key属性,然后我修改成了这样

<router-link tag="li" v-for="(item,index) in x.child" :to="item.link" :key="index">
    <a href="javascript:void(0)" class="title-list">
    <i class="iconfont icon-jiantou icon-after"></i>
    {{item.title}}
</a>
</router-link>

完美解决这个警告！（那个key的属性，我试了，只要加上就好，key的值不一定非要是我写的index，也可以是别的值，视情况而定）

    原文作者：蓝调爵士
    原文地址: https://segmentfault.com/a/1190000012353813
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞