写Vue实战项目时遇到的问题
1、使用v-for循环的时候报错这是因为我们安装了ESLint插件,对vue进行了eslint检查,只需将这个规则检查屏蔽掉即可,具体操作如下: 文件–》首选项–》设置–》在搜索框中输入:vetur.validation.template–》找到vetur.validation.template:true–》将vetur.validation.template:true在右栏框中进行...
1、使用v-for循环的时候报错
这是因为我们安装了ESLint插件,对vue进行了eslint检查,只需将这个规则检查屏蔽掉即可,具体操作如下:
文件–》首选项–》设置–》在搜索框中输入:vetur.validation.template–》找到vetur.validation.template:true–》将vetur.validation.template:true在右栏框中进行重置为false就ok了
2、使用v-for去绑定图片的src
html这么写没有问题,最重要的是你获取数据的时候图片的src路径数据要加上require(‘src’)不然获取不了图片路径
用require解决的原因很简单,webpack官网大图告诉我们,资源经过loader处理,变成处理好的文件。如果不用require的话,图片资源是不会加入的,所以肯定是404了
3、根据获取的值去采用对应的类名
这里使用三元表达式
官方文档https://cn.vuejs.org/v2/guide/class-and-style.html有两种写法 我是用第二种实现三元表达式
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[activeClass, errorClass]">
4、Vue2.0项目中使用axios 一开始json文件放在根目录下,怎么访问都是报错404
后来百度了一下,讲json放到了static目录下就可以访问了
这可能关于到脚手架的配置文件中定义了只会加载static文件夹中的文件 //引用其他大佬说的话,具体因为什么尚不知
5、使用axios获取数据之后,不能为组件的的数据赋值
原因:
在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined。
解决方案:
一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性
二)使用箭头函数
6、使用vue-router的时候
按道理,配置好main.js文件应该就可以
我的项目是这么配置:
可是输入/detail路径,怎么跳都回到HelloWorld组件
后来mode:'history', 就可以了
具体原因,要去看路由的实现
更多推荐
所有评论(0)