vue渲染列表时报错 [Vue warn]: Avoid using non-primitive value as key, use string/number

news/2024/7/10 2:12:53 标签: v-for, vue

进入页面报错,如下:
报错


原代码,如下:

<li v-for="item in this.new_list[0]" :key="item">
    <el-container>
        <el-header>
            <div class="title">{{item.title}}</div>
        </el-header>
        <el-main>
            <div>{{item.content}}</div>
        </el-main>
    </el-container>
</li>

原来是 key 出错了,上面提示 key 的值必需是 string 或者 number;也有可能是key的值重复了item,需要换个变量名。


修正代码,如下:

<li v-for="(item,index) in this.new_list[0]" :key="index">
    <el-container>
        <el-header>
            <div class="title">{{item.title}}</div>
        </el-header>
        <el-main>
            <div>{{item.content}}</div>
        </el-main>
    </el-container>
</li>

啦啦啦~~~这样就不会报错了。


—记录项目中的点点滴滴


http://www.niftyadmin.cn/n/1431389.html

相关文章

Vue路由跳转伴随传递参数

路由传参的4种方法 方法1、使用 $router.push 拼接参数传参 this.$router.push(/editCardetail?editTypeadd)方法2、直接在 <route-link> 标签中传递参数 <!-- 方式 1 --> <router-link :to"{ name:home, params:{name:1} }"> Just Go! </ro…

HTML中 符号 的 解码 与 转码

1.用正则表达式实现 html 转码 htmlEncodeByRegExp(str) { var s "";if(str.length 0) return "";s str.replace(/&/g,"&amp;");s s.replace(/</g,"<");s s.replace(/>/g,">");s s.replace(/ /g…

关于axios进行跨域请求时的问题处理

跨域问题 报错1&#xff08;接口文件未处理跨域&#xff09; 说明&#xff1a;这个错误是 “已被CORS策略阻止&#xff1a;请求的资源上不存在“访问控制允许源”头。” 解决方法&#xff1a; 在接口文件头部加这一句&#xff1a;header(Access-Control-Allow-Origin:*); php…

解决右侧出现滚动条页面抖动的问题

在页面内容没有占满屏幕时右侧不会出现滚动条&#xff0c;当再加载内容时页面会出现右侧滚动条&#xff0c;页面宽度由于是auto&#xff0c;整个页面会向左移动 解决办法&#xff1a; html {overflow-x: hidden;overflow-y: auto;}body {width: 100vw;overflow: hidden;paddin…

技巧:如何在不刷新页面的情况下获取cookie/localStorage的值?

引言 故事的背景&#xff1a;在一个页面内&#xff0c;通过路由给在同一个页面的组件传递参数。显然可以通过 Vue路由跳转伴随传递参数 这篇文章的多种方式进行传值。 路由传递参数的文件&#xff1a;label.vue <router-link to/Home/label/label_show v-for"(item,i…

vue中路由重定向

路由匹配展示的过程&#xff1a; 当点击a标签&#xff08;或者直接修改浏览器地址栏中的哈希值&#xff09;会改变哈希值当哈希值发生改变&#xff0c;Vue路由就会监听到这个变化当路由监听到哈希值改变以后&#xff0c;就会用配置好的路由规则来匹配当前的哈希值当哈希值被匹…

如何在Vue中加入Markdown编辑器

1、安装mditor 获取插件地址 2、在main文件中引入mditor import mditor from mavon-editor import mavon-editor/dist/css/index.css Vue.use(mditor)3、使用mditor <mavon-editor v-model"content" :toolbars"toolbars" style""/>4、…

php中 base64_decode与base64_encode加密解密函数

base64_encode是加密&#xff0c;而base64_decode是解密 base64_encode 语法&#xff1a;string base64_encode(string data); $stringwww.zhix.net智昕网络; //定义字符串 echo base64_encode($string); // 输出编码后的内容为 d3d3LnpoaXgubmV05pm65piV572R57ucbase64_decod…