前端问题踩坑

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 子组件点击事件传递

组件基础 — Vue.js (vuejs.org)

image.png

4.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()
        })
    }