element-ui input组件无法输入值

Question

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

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

Answer 1

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

Answer 2

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

<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 '这里的数据是根据其他接口返回的数据去匹配得到的'
    }
  }
})

Answer 3

其实你们走进了一个误区了，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>

Answer 4

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 '这里的数据是根据其他接口返回的数据去匹配得到的'
    }
  }
})

Answer 5

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

Answer 6

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

Answer 7

例子参考：https://jsfiddle.net/69onrkgc/

Answer 8

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

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

Answer 9

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

Answer 10

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 },
]

Answer 11

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