做项目时遇到使用循环组件，因为模式一样，只有数据不一样。但是按照普通的组件调用格式来做时报错，错误信息为Unknown custom element: <pop> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 查询了官方文档，还有其他的资料，发现是循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。 解决的方式是全局引...
一 、问题如下： [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循环列表时点击...
【实现方法】1.利用while循环来做，当然for循环也可以。2.递归 【代码内容】偷懒，直接用onkeyup事件来限制来页面的输入循环代码： //第一种方法 while循环oCount.onclick = function (){var oNum = document.getElementById(num).value;oNum = Number(oNum);if(oNum <= 1){oBox.innerHTML = 1;}var oRes = 1;while(oNum){oRes *= oNum;oNum--;}oBox.innerHTML = oRes;} 递归代码 // 第二种方法 递归oCount.onclick = function...
如下所示：<el-form-item label="线路类型：" prop="isGive"><el-radio-group v-model="currentLine.isGive"><el-radio :label="item.id" :key="item.id" v-for="item in isGive" >{{item.name}}</el-radio></el-radio-group></el-form-item> data () {return {merchantId: 0,centerDialogVisible: false,lineList: [],portOptions: [],isGive:[{id : "n",name : "购买"},{id : "y",name : "赠送"}], 根据接收到的数据 currentLine...
当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...
前言 这篇文章基于我在公司内部分享会整理而成。欢迎探讨补充。补充一：看来很多人没看完文章就评论了。我在文章末尾说了，是不写 for 循环，不是不用 for 循环。简单陈述不写 for 循环的理由：for 循环易读性差，而且鼓励写指令式代码和执行副作用。更多参考这篇文章补充二：回应大家的一些反对意见。本来准备专门写文章回应的，但是没时间，就简短回复，直接扔链接了。 1、for 循环性能最好。回应：微观层面的代码性能优化，不是...
在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验，本文通过微信小程序原生API来实现小程序中控件的各种动画效果，先看下本文最终的效果： 上图中的“关注公众号”动画就是我们要实现的效果。 为了实现上文中的效果，我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明：创建一个动画实例animation。调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组...
标题描述看起来有些复杂，有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> ...
期望：开始输出一个0，然后每隔一秒依次输出1,2,3,4。 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 结果：输出5。 原因：setTimeout 使函数延迟1s执行，而for循环执行完成还不到0.1秒，到执行函数的时候，其实 i 已经变成5了，因此console.log(i)输出5。 解决方法一：使用let块作用域。 for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 解...