前端问题踩坑
2022-10-09 本文已影响0人
送我迷迭香
1.报错 Failed to resolve loader: sass-loader
image.png新增组件时遇到的
解决:删掉vue文件CSS样式部分的lang="scss"
image.png
2.报错'v-model' directives require no argument
image.png原因:vetur插件的作者给出了解决办法:
这是ESLint对vetur进行了eslint检查,我们可以把eslint对该插件的检查关闭
解决1:
在VScode中,打开 “文件>首选项>设置” 找到右侧用户设置
搜索vetur.validation,找到下面这句
"vetur.validation.template": true
将true改成false
//如果没有可以直接添加该句 (将检查关闭)
"vetur.validation.template": false
保存,我们再看一下vue文件,发现不报错了。
解决2:
改为
v-model="inputValue"
3.vue 子组件点击事件传递
image.png4.v-for 只显示一条
image.png解决:
v-for 是放在需要循环的控件,不是父控件
5.Errors compiling template: Invalid v-for expression: (item,index)in list
image.png解决:
in 前面少个空格
6.组件外输入框输入时,组件内输入框会自动取消
image.png原因:
组件内用了isEdit 控制内部输入框是否显示,但是是通过prop传递给组件内部,默认false
组件外有修改时,重新刷新了prop数据,导致内部输入框取消
解决:
isEdit统一由内部控制,不通过prop传递,prop数据不能再组件内修改,如果想修改,只能通过$emit 传递给父级
7.输入框自动聚焦
解决:
1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。
<a-input ref="ainput" />
<button @click="handleChange"></button>
2、点击button自动聚焦,或其他事件需要聚焦
methods:{
handleChange(){
this.$nextTick(()=>{
this.$refs.ainput.focus()
})
}