时间戳

首页 > 解决方案 > 在 v-for (select) 中访问嵌套索引

javascript - 在 v-for (select) 中访问嵌套索引

问题描述

我有一个结构如下的对象：

{
  "cad_id": "547",
  "dropdowns": [
    {
      "dropdown_id": "6",
      "table_name": "ambulances",
      "column_name": "ambulance",
      "value": "G3,G4,G5,R1"
    },
    {
      "dropdown_id": "7",
      "table_name": "ambulances",
      "column_name": "hospital_name",
      "value": "Royal Free,Royal Free Cath Lab,Royal Free Maternity,UCH,Barnet,Barnet Marternity"
    }
  ],
  "responders": [
    {
      "type": "ambulance",
      "id": "41",
      "cad_id": "547",
      "ambulance": "G3",
      "call_sign_1": null,
      "call_sign_2": null,
      "call_sign_3": null,
      "call_sign_4": null,
      "incident_arrival_time": null
    }
  ]
}

在 HTML（视图）中，我想显示一个选择下拉列表，其中包含从数组value中的键填充的选项。然后它应该将所选选项显示为与数组中的键dropdowns匹配的选项。ambulanceresponders

这是我尝试过的 Vue 代码，但我一直收到一个错误，说x未定义（在选择中的 v-for 中）：

<section v-for="(i, index) in responders">
    <select class="form-control" v-model="i.ambulance">
        <option value="">--Please Select--</option> 
        <section v-for="x in dropdowns" v-if="x.table_name == 'ambulances' && x.column_name == 'ambulance'">
            <option v-for="option in x.value.split(',')" :value="option">{{ option }}</option>
        </section>
    </select>       
</section>

PS。我知道数据的结构不是最好的，但是我无法控制从服务器更改它。

标签： javascriptvue.js

解决方案

不建议在同一个组件中使用 v-for 和 v-if，

最好使用计算属性来过滤元素，然后对计算属性进行 v-for

{
    computed: {
        filteredItems() {
            return this.dropdowns.filter(x => x.table_name == 'ambulances' && x.column_name == 'ambulance') //your condition
        }
    }
}

推荐阅读