先说第一个,在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踩到的两个坑的更多相关文章

  1. vue1升级到vue2的问题

    router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页        path:'/index',        compone ...

  2. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  3. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  4. 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.变 ...

  5. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  6. 微信小程序项目踩过的几个坑

    一.前言 近期,开始了一段辛酸的还未开始就已经结束的"创业"(参见我的第二次创业,以梦为马,莫负韶华).大体上是开发了一款微信小程序,关于创业这件事情就不细说了,本文主要介绍一下开 ...

  7. 代码迁移到华为云上和Git的坑

    代码迁移到华为云上和Git的坑 先设置小乌龟Git上方式为ssh 参考链接:https://www.liangzl.com/get-article-detail-3586.html 注意:Tortoi ...

  8. vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

  9. vue1.0+vue2.0实现选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...

随机推荐

  1. WCF学习笔记——WCF基础

    一 WCF与SOA SOA是一种通过为所有软件提供服务外观,并将这些服务的WSDL集中发布到一个地方的一种组织企业软件的方法.它通过使用明确定义的接口通过跨越边界传递消息来让多个自治的服务协同工作.S ...

  2. maven 怎么在MyEclipse中打开Navigator视图

    方法一:1.点击菜单window2.选择show view菜单项3.选择other菜单项4.点击general,在其中可以找到 方法二:1.点击菜单window2.选择show view菜单项3.选择 ...

  3. 【Codeforces Round #437 (Div. 2) C】 Ordering Pizza

    [链接]h在这里写链接 [题意]     给你参赛者的数量以及一个整数S表示每块披萨的片数.     每个参数者有3个参数,si,ai,bi;     表示第i个参赛者它要吃的披萨的片数,以及吃一片第 ...

  4. ArcSDE中空间数据的备份与恢复

    在采用文件形式空间数据的时代,空间数据的备份仅仅是操作系统中的文件拷贝.备份和归档的过程:而空间数据的恢复也不过是复制.覆盖的操作:在基于ArcSDE和关系型数据库的空间数据库时代,空间数据的备份更多 ...

  5. 小小ARC造福无数码农

    今天无意中看到非常久之前的一个项目,古老的语法规范,还有更让人战战兢兢"内存管理代码"! 在这不得不说OC中内存管理的三种分类: Mannul Reference Counting ...

  6. php对象和数组的相互转换(还是可以去找没有没php的高阶课程看看看)(要不别人分析一下重点要点,要不自己来,不然 效果真的不好)

    php对象和数组的相互转换(还是可以去找没有没php的高阶课程看看看)(要不别人分析一下重点要点,要不自己来,不然 效果真的不好) 一.总结 都是自己实现的函数 算法: 1.先判断类型,gettype ...

  7. mysql select 无order by 默认排序 出现乱序的问题

    原文:mysql select 无order by 默认排序 出现乱序的问题 版权声明:感谢您的阅读,转载请联系博主QQ3410146603. https://blog.csdn.net/newMan ...

  8. 【26.83%】【Codeforces Round #380C】Road to Cinema

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. NASM Syntax

    NASM has a simplified syntax designed to let the user code with minimum overhead. In its simplest fo ...

  10. js如何将字符串作为函数名调用函数

    js将如何字符串作为函数名调用函数 一.总结 一句话总结:用eval来实现.eval可以执行参数字符串. 二.js将字符串作为函数名调用函数 比如我现在有一个字符串str = "func_a ...