Vue project el-input can not enter the solution

Table of contents

1. Background

Two, the solution

1. Method 1: Label nesting is too deep

2. Method 2: Use template as the parent tag of el-input

3. Method 3: v-model

1. Background

输入框动态填充值,但是填充后不能编辑了,
就像是被禁止了一样, 就很无语...

查了下资料, v-model填写了, 也没有templete标签嵌套

最终方法一即可解决问题...

Two, the solution

1. Method 1: Label nesting is too deep

如果标签嵌套太深，会导致无法获取到 DOM，这是我们需要 $forceUpdate() 强制刷新，才可获取

<el-input type='text' v-model='value' @change='change()'></el-input>
data(){
	return {
		value:'',
	}
}
change(){
	this.$forceUpdate();  //强制刷新
}

2. Method 2: Use template as the parent tag of el-input

这种情况需要在 template 中添加 slot-scope 属性，

<template slot-scope="scope">

3. Method 3: v-model

There is no v-model in el-input

Please like it if it is useful, and develop a good habit!

Please leave a message for questions, exchanges, and encouragement!

---