vue中v-for嵌套v-model

最新推荐文章于 2025-06-14 07:58:52 发布

原创最新推荐文章于 2025-06-14 07:58:52 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用Vue.js和axios动态获取并填充表单输入项的方法。通过HTTP请求从服务器获取扩展信息属性，然后将其展示在一系列表单项中，每个输入框都与返回的数据项相对应，实现了表单的动态生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<FormItem style="display:inline-block;" v-for="extendProp in extendPropList">
	  <label style="font-weight:700;width: 70px; display:inline-block; text-align: right;">{{extendProp.name}}：</label>
	  <Input v-model="extendProp.value" style="width:250px;" placeholder= "请输入扩展信息" />
</FormItem>

js部分

	//查询扩展信息属性
    async selectExtend(value,selectedData){
      this.extendPropList = [];
      var assetsTypeName = selectedData[(selectedData.length)-1].label;
      const{data:res} = await this.$http.get("/assets/information/search/all?assetsTypeName="+assetsTypeName);
      //遍历放入data中定义的数组
      for(var i in res){
        this.extendPropList.push({name: res[i].name, value: ''});
      }

    },