引用element里面的但是现在有一个问题我点击添加的时候有bug 求解决

Question

引用element里面的<el-tabs>但是现在有一个问题我点击添加的时候有bug 点击添加 他会添加到第一栏里面 而并不是我现在的这个!

<div v-for="(item, index) in formData.order_items" :key="index" class="Add-express">
  <el-main>
    <el-col :span="24" class="warp-main">
      <el-form :inline="true" class="demo-form-inline">
        <div class="Trash" @click="del(index)">
          <img src="https://i.52112.com/icon/jpg/256/20150225/600/1229286.jpg">
        </div>
        <div class="Numbers">
          <div class="Numbers-left">
        <span>电商单号</span>
          <p>
            <el-input type="text" placeholder="(请填写电商单号)" v-model="item.taobao_order_no"></el-input>
          </p>
          </div>
          <div class="Numbers-right">
        <i>*</i>
        <span>寄送快递单号</span>
          <p>
            <el-input type="text" placeholder="(请填写您寄往我公司揽件仓库的快递号)" v-model="item.delivered_no"></el-input>
          </p>
          </div>
        </div>
      </el-form>
    </el-col>
  </el-main>
  <div class="content">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
  <el-tab-pane
    v-for="(ite,index) in item.cargo_items"
    :key=" index"
    :label="ite.title+(index+1)"
    :name="ite.name"
  >
  <!-- {{index}} -->
    <div class="shop">
      <div class="shop-one">
        <div class="shop-one-left">
          <i>*</i>
          <span>物品描述</span>
          <p>
            <el-input type="text" placeholder="(请填写物品描述)" v-model="ite.cargo_desc"></el-input>
          </p>
        </div>
        <div class="shop-one-right">
          <span>物品数量</span>
          <p>
            <el-input type="text" placeholder="(请填写物品数量)" v-model="ite.quantity"></el-input>
          </p>
        </div>
      </div>
      <div class="shop-two">
        <span>详细英文品名</span>
          <p>
            <el-input type="text" placeholder="(请填写详细英文品名)" v-model="ite.goods_desc_en"></el-input>
          </p>
      </div>
      <div class="shop-three">
        <div class="shop-three-left">
          <span>HSCODE</span>
          <p>
            <el-input type="text" placeholder="(请填写HSCODE)" v-model="ite.hscode"></el-input>
          </p>
        </div>
        <div class="shop-three-right">
          <span>货值(AUD)</span>
          <p>
            <el-input type="text" placeholder="(请填写货值)" v-model="ite.cargo_value"></el-input>
          </p>
        </div>
      </div>
    </div>
  </el-tab-pane>
</el-tabs>
  </div>

Answer 1

<div v-for="(item, idx1) in formData.order_items" :key="index" class="Add-express">
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
改一下
<el-tabs v-model="editableTabsValue" type="card" editable @tab-add="add(idx1)">

add(i){

  let newTabName = ++this.tabIndex + '';
  this.formData.order_items[i].cargo_items.push({
    title: '物品',
    name: newTabName,
    cargo_desc: '',
    quantity:"",
    hscode:"",
    cargo_value:"",
    goods_desc_en:"",
    content: 'New Tab content'
  });
  this.editableTabsValue = newTabName;

}