el-input无法进行输入以及el-radio触发了两次点击事件

文章目录

• 前言
• 一、el-input无法进行输入
• • 原因1. 标签嵌套太深
  • 原因2. el-input标签上没有使用v-model
  • 原因3. 使用template作为el-input的父标签
• 二、el-radio触发了两次点击事件
• • 1. 与lable的默认事件有关
  • 2. 解决：在input点击时触发

---

前言

记录使用elementUI的时候遇到的问题。例如：el_input无法进行输入、el-radio触发单次点击事件等

一、el-input无法进行输入

原因1. 标签嵌套太深

如果标签嵌套太深，会导致无法获取到DOM,需要$forceUpdate()强制更新

 <el-input type="text" v-model="value" @change="change()"></el-input>
 data(){
    return {
       value:'',
      }
 }，
 menthods:{
    change(){
       this.$forceUpdate()
    }
}

原因2. el-input标签上没有使用v-model

原因3. 使用template作为el-input的父标签

这种需要在template标签上添加slot-scope属性

 <template slot-scope="scope">
      <el-input type="text" v-model="value"></el-input>
 </template>

二、el-radio触发了两次点击事件

1. 与lable的默认事件有关

<label >
      <span> <input type="radio"/></span>
      <span>销毁</span >
</label>

el-radio上的方法添加在label标签上的，在点击之后

1. 点击了labe标签，触发chooseIdClick方法
2. 点击了labe标签，label标签与input标签关联，input通过冒泡触发了chooseIdClick方法，因此一共触发了两次点击事件。

2. 解决：在input点击时触发

<el-radio-group v-model="type" >
      <el-radio :label="1" @click.native="chooseIdClick($event)">转派</el-radio>
      <el-radio :label="2">销毁</el-radio>
</el-radio-group>

 chooseIdClick(e) {
      if (e.target.tagName != 'INPUT') {
        return
      }
     // 执行其它代码
    }