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

【问题标题】：VueJs - Elemenet UI : How to set el-select option inside v-forVueJs - Elemenet UI：如何在 v-for 中设置 el-select 选项
【发布时间】：2019-01-04 05:11:25
【问题描述】：

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

预期：

我希望el-select组件只根据索引生成item数据

示例：包裹清单
- 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/

【问题讨论】：

标签： vuejs2 selecteditem v-for element-ui

【解决方案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

【讨论】：

我已经用 GET 方法更新了问题，你能给我一个例子吗 .then(response => { this.packageData= response.data.data })

【解决方案2】：

您可以在数据中为 v-model 设置动态值。

例如：

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（您也可以在帖子中找到）

希望对你有帮助...

【讨论】：