vue+element 动态添加input框

1.实现效果

下拉框选择数字,下面动态添加input输入框

2. 代码

<el-form-item label="选择项" prop="checkValue">
  <el-select placeholder="请选择"
             v-model="checkValue"
             @change="selectChange">
    <el-option v-for="item in selectOptions" //selectOption是自己定义的下拉框内容
               :key="item.value"
               :label="item.label"
               :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

<el-col :span="12" v-for="(item, index) in form.content" :key="index">
   <el-form-item :label="'选择项描述'+ (index + 1)" prop="checkDescribe">
     <el-input v-model="item.text"
               placeholder="请输入内容"
               style="width: 12.8vw"
               @input="tosing_list" />
   </el-form-item>
 </el-col>

selectOptions: [
    {
      value: 1,
      label: 1,
    },
    {
      value: 2,
      label: 2,
    }
]

method :{

selectChange (value) {
     this.str = '';
     this.form.content = [];
     let i = 0;
     var arr = [];
     for (let i = 0; i < value; i++) {
       arr.push({ text: "" });
     }
     this.form.content = arr;
   },
	tosing_list () {
	  // 数组拼接
	  var str = '';
	  this.form.content.forEach((item) => {
	    if (item.text !== "") {
	      str += item.text + ",";
	    }
	  });
	  this.str = str;
	}
}