According to the dynamically obtained data -> dynamically render the el-input box

Dynamically obtain data before page display

Click the "Get Dynamic Data" button -> The page will be displayed after the data is dynamically obtained

Enter data in the input box -> click the "Print input data" button

code example

<!-- 根据动态获取的数据 -> 动态渲染 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>

problems encountered

• When adding attributes to objects, this.dataObj['index' + index] = ''it is not feasible, but this.$set(this.dataObj, 'index' + index, '')it is feasible