element-ui input组件无法输入值

jzsn
  • 204

问题描述:在使用element的输入框,输入框输入不了值了,有没有大佬知道原因吗?

代码如下:http://jsrun.net/kXXKp/edit

回复
阅读 50.6k
11 个回答

clipboard.png
我也遇到过,可能是组件套用太深,vue检测不到视图更新,在失效输入框的input事件中加 this.$forceUpdate()强制刷新

你这是想实现什么样的效果,一起研究下 无法修改是没用双向绑定 只能获取 看看有没有别的办法
备注:我改了一下 不知道有没有坑你可以参考下

<div id="app">
    <el-input
      v-for='(item,index) in arr'
      type="textarea"
      autosize
      placeholder="请输入内容"
      v-model="textarea2[index]"
      >
</el-input>
<div style="margin: 20px 0;"></div>
</div>
var app = new Vue({
  el:'#app',
  data() {
    return {
      textarea2:[],
      arr:[]
    }
  },
  mounted(){
    //获取id
    this.get1();
  },
  methods:{
    get1(){
      this.arr = [1,2,1,23,1,25]
      this.arr.forEach(item=>{
        let tt = this.get(item)
        this.textarea2.push(tt)
      })
      
    },
    get(n){
     // 根据n的值去请求接口获取显示的内容
      // 伪代码
      if(n == 1){
           return '问题就是我想编辑这个输入框,但是编辑不了,有没有好的办法'
      }
      return '这里的数据是根据其他接口返回的数据去匹配得到的'
    }
  }
})

其实你们走进了一个误区了,v-model事件实现机制就是你在输入值触发 @input 事件后更改 :value 值。
因此,你在使用 <el-input> 的时候可以有两种方式来实现。

v-model 双向绑定

<el-input v-model="result" type="text"></el-input> 

@input + :value 模拟 v-model 你在 change 方法里更改 result 的值

<el-input :value="result" @input="change($event)" type="text"></el-input>

element-ui 的 el-input 组件跟 html 原生组件是有区别的。
el-input 的 :value='a' 可以理解为只要 a 的值不变,即使在输入框输入字符,也会重置为 a 的值,所以回显就会一直将输入的部分截取,只保留 a 的值,除非将输入的值再赋值给 a。

<div id="app">
    <el-input
      type="textarea"
      autosize
      placeholder="请输入内容"
      v-model="msg1"
      ></el-input>
  <el-input
      type="textarea"
      autosize
      placeholder="请输入内容"
      :value="msg2"
      @input="onInput"
      ></el-input>
</div>
var app = new Vue({
  el:'#app',
  data() {
    return {
      msg1: 'v-model',
      msg2: 'key'
    }
  },
  methods:{
    onInput (e) {
            this.msg2 = e
        }
  }
})

而原生 input 则不会有这样的问题。即使不将输入的值赋值给 a,在回显上不会有问题,看到是输入后的完整值,只是如果不将输入的赋值给 a ,则 a 的实际值还是原来的值,并不是输入后看到的 input 框里的值。

<div id="app">
  <div v-for='(item, index) in list' :key="index">
    <input
      type="textarea"
      autosize
      placeholder="请输入内容"
      :value="get(item)"
      @input="onInput(item, $event)"
      />
  </div>
var app = new Vue({
  el:'#app',
  data() {
    return {
      list: [1,2,1,23,1,25,],
      textarea2: '',
      textarea3: '',
      edit: {
        name: '',
        value: '我是修改数据'
      }
    }
  },
  methods:{
    onInput (item, e) {
      this.edit = {
        name: item,
                value: e.target.value
      }
      console.log(this.edit.value)
    },
    get(n){
     // 根据n的值去请求接口获取显示的内容
      // 伪代码
      if(n == 1){
           return '问题就是我想编辑这个输入框,但是编辑不了,有没有好的办法'
      }
      return '这里的数据是根据其他接口返回的数据去匹配得到的'
    }
  }
})

你应该使用双向绑定 v-model

建议用v-model来做数据绑定,如果非得用这种方式的话,可以给input加一个change事件试试

这是饿了么的ui 框架啊,你应该看他的参数代表着什么,而不是凭经验,在el-input value/v-model是同个属性来着:

clipboard.png

你应该:不用el-input自己写,或者就按照el-input实现方式来写

你挺能闹i
  • 1
新手上路,请多包涵

你的值绑定的是一个方法,怎么去修改值
clipboard.png

v-model是双向绑定,绑定的值是一个可变的对象(如data里面的某个变量,实际上是data对象上的一个属性),如下示例代码:

<div v-for='(item, index) in list' :key="index">
    <input
      placeholder="请输入内容"
      v-model="item"
     />
</div>
var app = new Vue({
  el:'#app',
  data() {
    return {
      list: [1,2,3,4]
    }
  }
})

v-model绑定的是常量1、2这样的值,由于常量是不变的,所以会导致输入框无法输入。要想使双向绑定起作用,只要改v-model="item.name"并且改掉数组为下面即可

[
    { name: 1 },
    { name: 2 },
    { name: 3 },
    { name: 4 },
]
hqing
  • 2
新手上路,请多包涵

看了代码确实有问题 ,你得组件和data中的一个变量绑定,代码看上去绑定的是一个数组里面的元素,实际上你返回的是一个字符串 没有绑定具体的变量或者说属性

你知道吗?

宣传栏