1

我有 packageData 与 item 有孩子并且没有孩子，然后第 1 步是循环 v-for packageData.items.data 然后每个项目都有组件 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 加入 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/

4

2 回答 2

0

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

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

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

于 2018-07-27T06:21:12.330 回答
0

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

你可以检查这个答案

您可以查看此示例（您也可以在帖子中找到它）

希望能帮助到你...

于 2019-06-14T23:29:21.000 回答