从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 ...
随机推荐
- UML学习总结(2)——StartUML 各种类图的例子
1.UML分为: 1)静态建模:系统基础和系统固定框架结构,这些图形往往是"静态"的. 类图(Class Diagram):常用来分析业务概念 用例图(Use Case Diagr ...
- [D3] Create Chart Axes with D3 v4
Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...
- 从Unreal Engine 3到Unreal Engine 4
Unreal Engine 4公布好长好长时间了.直到近期才有时间细致去看一下. TimSweeney老大一句话"IF YOU LOVE SOMETHING, SET IT FREE&quo ...
- (转)Vim练级攻略
(转)Vim练级攻略 原文链接:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆 ...
- The behavior of App killed or restored by Android System or by users
What's the behavior of App killed or restored by Android System or by users? First, user kills the a ...
- 【BZOJ 4518】[Sdoi2016]征途
[链接] 链接 [题意] 在这里输入题意 [题解] DP+斜率优化; \(D(x) = E(x^2)-E(x)^2\) 其中\(E(x)^2\)这一部分是确定的. 因为总长是确定的,分成的段数又是确定 ...
- Android App优化之延长电池续航时间
禁用广播接收器 确保广播接收器在真正须要时才运行指令,在onResume中当中广播接收器,在onPause中禁用. 在manifest文件里声明广播接收器时,事先默认配置成禁用的 <receiv ...
- 简要分析unity3d中剪不断理还乱的yield
在学习unity3d的时候非常easy看到以下这个样例: void Start () { StartCoroutine(Destroy()); } IEnumerator Destroy(){ yie ...
- 一次svn数据库的崩溃错误的解决
作者:朱金灿 来源:. 然后再更新svn数据库,依然出现上面提到的错误.于是又想到新建一个svn数据库,然后将旧库备份出来再导入到新库中,运行命令:svnadmin dump E:\Repositor ...
- HDU 3791 二叉搜索树 (数据结构与算法实验题 10.2 小明) BST
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=3791 中文题不说题意. 建立完二叉搜索树后进行前序遍历或者后序遍历判断是否一样就可以了. 跟这次的作业第 ...