一 、问题如下： [Vue warn] Avoid using non-primitive value as key, use string/number value instead.non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key，用string或number作为key。 :key相当于是索引的作用，提高循环性能，如果循环量较小，不写也可以的。 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
下面一段代码给大家介绍vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)，具体代码如下所示： <div class="imglist-item" v-for="(items,key) in imgmaterialdialog.imglist" @click="selectimg(items,key)" :class="(key + 1) % 4==0?imglist-noright:"><img :src="items.tempMaterialUrl" alt="" /> <div class="layer" v-bind:class="{showorhide:key==currents}"><i class="el-icon-check"></i> </div><p class=...
先看一下产品需求，如下图所示，产品要求图片和它的名称一一对应，本来是非常简单的需求，后台直接返回图片路径和名称，前台直接读取就可以了，但是我们没有存储图片的服务器，再加上是一个实验性的需求，图片需要存放到前台。当时我想，vue 中的img 的src 可以动态绑定到一个变量上， 很简单吗，就没有考虑太多，直接开始做了。 首先和后台商量一下数据结构，因为图片要和名称一一对应，所以后台要返回中英文的名称的映射，我把前...
1、在data数组里边添加id（说明：我的是虚拟数据）2、在点击事件上传入id参数，如下：3、在methods里边添加点击跳转的方法，不要忘记在function后边的括号内传入id，然后判断如果id==1，就跳转那个页面，id==2跳转那个页面。至此跳转完成。 附加： 点击返回上一页方法： window.history.go(-1);就是返回上一页。（不要忘记在标签上添加click点击事件） returnS:function () {window.history.go(-1); }以上这篇基于vue循环列表时点击...
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。 在下面这个例子中，如果不给 p 元素绑定k...
最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能，这个在前端显示的星星是用class样式来进行控制的 class =” real-star comment-stars-width5 ” 数据库里记录的信息只有一个评分1-5。我们如果用一般的php方法直接在class里面用 comment-stars-width{$score}这样是行不通的。在查了很多资料和做过很多尝试以后，确定了一个可行的方法 我们使用vue的:class来进行class的绑定。:class=”`comment-stars-width`+s.score” 然...
问题描述： 在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值； 解决： 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled="editstatus" @on-change="selectInsurance"><Option v-for="item in dataArr" :key="item.code" :value="item.cod...
标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。 首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。 然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何...
使用v-for循环生成一个多级嵌套菜单栏，只要你学会了这个方法，几乎所有的菜单栏都可以实现了。 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id " v-for="obj1 in bar1"><a>{{obj1.title}}</a> <div class="level-three" v-if="obj2.parentId == obj1.id" v-for="obj2 in bar1"><a>{{obj2.title}}</a></div> </div> </div> ...
vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码： <body><div class="box"><ul><li v-for="value in arr">{{value}}</li><br> <li v-for="(value,index) in arr">{{value}}--{{index}}</li></ul></div> <script src="js/vue.js"></script> <script>new Vue({el:".box",data:{arr:["哈哈","嘻嘻","哼哼"]}}); </script> </body>输...
实例如下所示： <template><div class="hello"><h1>{{ msg }}</h1><h2>Foo</h2><div v-for ="(item, index) in list"><!--<p>{{item }}</p>--><h1 v-show="false">{{a[index] = item.bb}}</h1><!-- <h1>index:{{index}}</h1>--></div><h2>a:{{a}}</h2><h2>{{cc}}</h2><!--<button v-on:click="cc">点击</button>--></div> </template> <script> export default {name: foo,data () {return {msg: 这儿是Foo,list:[{insertId: asfas...
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API app.html <!doctype html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>vuejs 嵌套循环、if判断</title><style type="text/css">[v-cloak] { display: none }</style> </head> <body><div id="app"><table><tr> <td >id</td><td >姓名</td><td >手机号</td><td >城市</td>...
demo：<div v-for="item in temps" :key="item.id"><div class="contract-item"><img :src="item.imgUrl"></div></div>引入图片，注意路径： import con1 from "@/assets/img/con01.png"; import con2 from "@/assets/img/con02.png"; import con3 from "@/assets/img/con03.png";进行图片的加载位置：temps: [{imgUrl: con1},{imgUrl: con2},{imgUrl: con3},],这样就实现了循环遍历的时候加载不同的图片。 以上这篇vue2.0 循环遍历...
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>//:checked="index == 0"为索引为0的，即为第一个复选框添加属性。 拓展：默认被选中的复选框，只需要index指定即可。 以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给...
什么是组件： 众所周知组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。下面话不多说了，来一起看看本文的正文内容。 引言 写了大大小小不少基于vue的项目，但是基本没用到过组件循环引用的知识。为了查缺补漏，照着官方文档撸一个DEMO：组件之间的循环引用 本人的运行版...