【Vue】element-ui的多行输入框组件的大小不能双向绑定

Z时代
2024-01-10
分类：技术分享

测试代码

<template>
<div>
<el-input type="textarea" :autosize="autosize"></el-input>
<el-input-number v-model="autosize.minRows"></el-input-number>
<el-input-number v-model="autosize.maxRows"></el-input-number>
</div>
</template>
<script>
export default{
data(){
return{
autosize:{minRows:2,maxRows:4},
}
}
}
</script>

【Vue】element-ui的多行输入框组件的大小不能双向绑定
如上测试代码，修改minRows和maxRows，输入框大小不会改变，怎么解决？

回答

目前尝试的方法是给input加一个key，key变化是刷新组件，暂时能用了，不知道有没有更好的方法

<template>
  <div style="width: 400px;">
    <el-input type="textarea" :autosize="autosize" :key="autosize.minRows+autosize.maxRows"></el-input>
    <el-input-number v-model="autosize.minRows"></el-input-number>
    <el-input-number v-model="autosize.maxRows"></el-input-number>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        autosize:{minRows:2,maxRows:4},
      }
    }
  }
</script>