根据动态获取的数据 -＞ 动态渲染 el-input 框

动态获取数据前页面展示

点击“获取动态数据”按钮 -> 动态获取数据后页面展示

在输入框中输入数据 -> 点击“打印input数据”按钮

代码示例

<!-- 根据动态获取的数据 -> 动态渲染 input 框 -->
 <template>
   <div>
     <el-input
       v-for="(item, index) in arr"
       :key="index"
       v-model="dataObj['index' + index]"
       @change="changeHandler"
     />
     <el-button type="primary" @click="arr = ['aaa', 'bbb', 'ccc']">获取动态数据</el-button>
     <el-button type="primary" @click="gethandler">打印input数据</el-button>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Ceshi',
   components: {},
 
   data() {
     return {
       arr: [],
       // arr: ['aaa', 'bbb', 'ccc'],
       dataObj: {}
     }
   },
 
   computed: {},
 
   watch: {
     arr: {
       handler(val) {
         // debugger
         val.forEach((item, index) => {
           /** ** 【注意】给 input 绑定值的 obj 添加对应的属性（其实该操作不加也可以） ****/
           // this.dataObj['index' + index] = '' // 【问题】这样给对象添加属性有问题（input不能输入数据并且绑定不到该属性值）
           this.$set(this.dataObj, 'index' + index, '')
         })
       }
     }
   },
 
   created() {},
 
   methods: {
     gethandler() {
       console.log('获取 dataObj 数据 ----', this.dataObj)
     },
     changeHandler() {
       console.log(' change事件 this.dataObj----', this.dataObj)
     }
   }
 }
 </script>
 
 <style lang='scss' scoped>
 </style>

遇到的问题

• 给对象添加属性时，this.dataObj['index' + index] = '' 不可行，this.$set(this.dataObj, 'index' + index, '') 可行