VueJs-Elemenet UI:如何在v-for中设置el select选项

Question

我有一个packageData，其中项有子项，没有子项，然后步骤1是对packageData.items.data循环v，然后每个项都有组件el select。但是el select在每个索引中显示所有数据项。

预期：

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

   示例：包列表

   • Ipad=el select(数据索引[0](

   • Iphone=el select(数据索引[1](

2。如果项目没有子项el select生成项目父项，但如果项目有子项el select生成具有父项的项目加入项目子项

示例：包列表

• Ipad=无子项(选项：item.data(

• Iphone=带子项(选项：item.data join 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获取

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

您可以在数据中为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>

你可以检查这个答案

你可以查看这个例子(你也可以在帖子中找到(

希望它能帮助。。。

Answer 2

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

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

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