vue循環添加輸入框

循環添加效果如上圖。

 

上代碼

 <el-form-item label="大區:" prop="formInline.gameArea" class="area">
       <!-- <el-input v-model="formInline.name" placeholder="請輸入大區名稱" style="width: 260px;" ></el-input><img src="@/assets/add.svg" width="35px" height="35px">-->

          <el-row
            v-for="(item, index) in formInline.gameArea"
            :key="'gameArea' + index">
            <el-col :span="20">
              <el-form-item>
                <el-input style="width: 260px;" placeholder="請輸入大區名稱" v-model="item.area_name"></el-input>
                <img v-if="index == 0" src="@/assets/add.svg" width="35px" height="35px" @click="pushHomeHot(formInline.gameArea)">
                <el-button v-if="index >0" type="text" @click="delHot(formInline.gameArea, index)">刪除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
      <!--{{formInline.gameArea}}-->
      </el-form-item>

      <el-form-item label="段位:" prop="formInline.gameLevel" class="wrap">
       <!-- <el-input v-model="formInline.name" placeholder="請輸入段位名稱" style="width: 260px;" ></el-input>-->
        <el-row
          v-for="(item, index) in formInline.gameLevel"
          :key="'gameLevel' + index">
          <el-col :span="20">
            <el-form-item>

              <el-upload
                class="avatar-uploader"
                :action=uploadUrl
                :show-file-list="false"
                :on-success="handleAvatarSuccessList"
                :before-upload="beforeAvatarUpload"
                :objectBind="index"
                >
                <img v-if="item.imageUrlList" :src="item.imageUrlList"  class="avatarList">
                <i v-else class="el-icon-plus avatar-uploader-icon-list"></i>
              </el-upload>

              <el-input style="width: 260px;" placeholder="請輸入段位名稱" v-model="item.level_name"></el-input>
              <img v-if="index == 0" src="@/assets/add.svg" width="35px" height="35px" @click="pushLevel(formInline.gameLevel)">
              <el-button v-if="index >0" type="text" @click="delHot(formInline.gameLevel, index)" style="color: deepskyblue">刪除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
       <!--{{formInline.gameLevel}}-->
      </el-form-item>

 

增加以及刪除的事件

 pushHomeHot(list) {
        list.push({})
      },
      pushLevel(list) {
        list.push({
          level_name:'',
          imageUrlList:'',
          cover:''
        })
      },
      // 刪除熱門服務項的方法
      delHot(list, index) {
        list.splice(index, 1)
      },