从vue1迁移到vue2踩到的两个坑
先说第一个,在vue1中用v-for的时候,习惯性用$index和$key来取键。今天迁移到vue2之前,也知道vue2里不能这样用了,结果还是出问题了,
数据渲染不出来。
<li v-for="(key, price) in intel.storage" @click="changePrice(key, price)" :class="{active: intel.price == price}">
<span>{{key}}</span>
</li>
因为是用vuex管理数据,排查问题多花了一些时间。问题出在了v-for里键值对的顺序了,vue2要求括号里第一个参数是值,第二个是键。
再说第二个问题,和vue2无关,是自己迁移的时候不小心多删了代码,先看一下chrome的报错

组件里的模板代码是这样的
<template>
<div>
<router-link to="/">商品</router-link>
</div>
<div>
<ul>
<router-link to="/in">Intel</router-link>
</ul>
</div>
</template>
问题出在template里面的两个div外面少了一层根元素,包裹上一层div就好了。
从vue1迁移到vue2踩到的两个坑的更多相关文章
- vue1升级到vue2的问题
router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页 path:'/index', compone ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- vue1.0与vue2.0对于v-for的使用的区别
vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- 微信小程序项目踩过的几个坑
一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开 ...
- 代码迁移到华为云上和Git的坑
代码迁移到华为云上和Git的坑 先设置小乌龟Git上方式为ssh 参考链接:https://www.liangzl.com/get-article-detail-3586.html 注意:Tortoi ...
- vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑
最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...
- vue1.0+vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...
随机推荐
- Java Timer TimerTask Example(java Timer的例子)
Java java.util.Timer is a utility class that can be used to schedule a thread to be executed at cert ...
- [D3] Build a Scatter Plot with D3 v4
Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...
- 10.7 android输入系统_Dispatcher线程情景分析_Reader线程传递事件和dispatch前处理
android输入系统C++最上层文件是com_android_serve_input_InputManagerService.cpp global key:按下按键,启动某个APP可以自己指定,修改 ...
- 【习题 5-11 UVA 12504 】Updating a Dictionary
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 不确定某个map里面是否有某个关键字的时候. 要用find来确定. 如果直接用访问下标的形式去做的话. 会强行给他加一个那个关键字( ...
- DBeaver笔记-快捷键篇
公司使用的是PostgreSQL数据库,可以使用pgAdmin或者DBeaver进行连接该数据库.个人更喜欢用DBeaver,因为其界面更加美观,操作也相对简单.对于习惯了eclipse的开发者来说, ...
- 程序猿必备软件转载自 www.uhdesk.com
XMLSpy 2012 企业版中文破解版 软件描写叙述: XMLSpy是XML(标准通用标记语言的子集)编辑器,支持WYSWYG.支持Unicode.多字符集,支持Well-formed和Valida ...
- POJ 2014 Flow Layout 模拟
http://poj.org/problem?id=2014 嘻嘻2014要到啦,于是去做Prob.ID 为2014的题~~~~祝大家新年快乐~~ 题目大意: 给你一个最大宽度的矩形,要求把小矩形排放 ...
- ArcGIS 中要素的查询与修改
转自nimeila的回答 求C# ArcGIS Engine修改选中要素的属性,单要素都行 RLAlterFrm RLalter = new RLAlterFrm(); RLalter.ShowDia ...
- php面试题二--解决网站大流量高并发方案(从url到硬盘来解决高并发方案总结)
php面试题二--解决网站大流量高并发方案(从url到硬盘来解决高并发方案总结) 一.总结 从外到内解决网站大流量高并发问题---从提交一个url开始(从用户按下搜索栏回车键开始) url最开始会到d ...
- bc -l 对于 %取模计算出错
https://yq.aliyun.com/articles/279384 expr % expr The result of the expression is the "rema ...