Question

我有packageData，其中item具有子对象，没有子对象，然后第1步是循环v- for packageData.items.data，然后每个项目都有组件el-select。但是el-select会显示每个索引的所有数据项。

预期：

我希望el-select组件仅基于索引生成项目数据

示例：包装清单
- Ipad = el-select（数据索引[0]）
- Iphone = el-select（数据索引[1]）

2。如果项目没有子项，则el-select生成项目的父项，但是如果项目有子项，则el-select生成具有父级联接项的子项。

示例：包装清单

iPad =不带子代（选项：item.data）
带子代的iphone =（选项：item.data加入item.data.children.data）

这是我的代码

<div class="row" v-for="(item, index) in packageData.items.data" :key="index">
  <div class="col-md-5 text-right">
     <h5>{{ item.product_group_name }}</h5>
  </div>
  <div class="col-md-7">
   <el-select v-model="valuePackage" filterable placeholder="Select">
     <el-option v-for="list in packageData.items.data" :key="index" :label="list.product_name" :value="list.product_id">
     </el-option>
    </el-select>
  </div>
</div>

这是我的axios GET

getProductPackage() {
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }
  axios({
    method: 'GET',
    url: baseApi(this.selectedStore.url_id, 'en', 'productpackage'),
    headers: headers
  })
    .then(response => {
      this.packageData= response.data.data
    })
    .catch(error => {
      console.log(error)
    })
},

这是我的小提琴：http://jsfiddle.net/dede402/5zw92gqm/37/

Answer 1

您可以在Watch中（如果此变量来自另一个组件）或在Mount事件中在渲染组件之前映射数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://vuejs.org/v2/guide/computed.html#Watchers

Answer 2

您可以在数据中为v模型设置动态值。

例如：

data() {
    return {
      item: [
         {
           id:'1234',
           itemName:'item1',
           persons: ["person1", "person2", "person3", "person4"]
         },
         {
           id:'4567',
           itemName:'item2',
           persons: ["person5", "person6", "person7", "person8"]
         }
      ],
      dynamicModel: {}
    };
  }

然后您可以执行以下操作：

<tr v-for="item in items">
  <td>{{ item.name }}</td>
  <td v-for="person in items.persons">
   <input v-model="dynamicModel[person]"
     name="person"
     :value="person"       
     type="text" />
  </td>
</tr>

您可以检查this answer

您可以选中this example（也可以在帖子中找到它）

希望有帮助...

VueJs-Elemenet UI：如何在v-for

2 个答案: