如何在 VUEJS 中更新第二个动态创建的级联 select（下拉）

Question

我正在 VueJS 中创建一个计算器应用程序来响应用户 select。此应用程序没有后端，所有变量和数据都是前端的一部分。下拉选项 select 是在单个 JSON 定义中预定义的。这个JSON我随意redefine/split根据自己的需要，不是固定的

用户故事是：

用户select在第一个下拉select中输入货物发货装货港select（从JSON装货）。
第二个下拉列表 select 是货物运送目的地，它是根据第一个下拉列表中的 selection 从 JSON 定义更新的（目的地数组名称和价格。目的地名称相同，以后可以added/removed，价格不同)
用户select的货物运送目的地，此selection中的值等于与目的地港口相关的数字（取自数组）。

我尝试从第一个下拉列表中的 selected 值加载第二个下拉列表，但没有结果。

<select required id="porf_of_loading" name="porf_of_loading" v-model="selectedPortOfLoading">
  <option value="" disabled selected>Choose loading port</option>
  <option v-bind:value="portOfLoading.port" v-for="portOfLoading in portsOfLoading">{{ portOfLoading.port }}</option>
</select>
<label>PORT OF LOADING</label>
<select required id="final_destination" name="final_destination" v-model="selectedFinalDestination">
  <option value="" disabled selected>Choose destination</option>
  <option v-bind:value="finalDestination.value" v-for="finalDestination in selectedPortOfLoading.finalDestinations">{{ finalDestination[0] }}</option>
</select>
<label>FINAL DESTINATION</label>

data: {
    selectedPortOfLoading: [],
    selectedFinalDestination: [],
    portsOfLoading: [{
            port: 'Port 1',
            finalDestinations: [
                ['Dest 1', 141],
                ['Dest 2', 141],
                ['Dest 3', 146],
                ['Dest 4', 140],
                ['Dest 5', 0]
            ],
            tTime: 42,
            aes: 0,
            minCbm: 1
        },
        {
            port: 'Port 2',
            finalDestinations: [
                ['Dest 1', 145],
                ['Dest 2', 145],
                ['Dest 3', 149],
                ['Dest 4', 130],
                ['Dest 5', 0]
            ],
            tTime: 26,
            aes: 0,
            minCbm: 1
        },
        {
            port: 'Port 3',
            finalDestinations: [
                ['Dest 1', 149],
                ['Dest 2', 149],
                ['Dest 3', 150],
                ['Dest 4', 142],
                ['Dest 5', 0]
            ],
            tTime: 31,
            aes: 0,
            minCbm: 1
        }
    ]
}

预期结果：

第一个下拉选项：
- "Port 1"
- "Port 2"
- "Port 3"
第二个下拉选项（在 selection of "Port 1" 的情况下）：
- "Dest 1" 值为：141
- "Dest 2" 值为：141
- "Dest 3" 值为：146
- "Dest 4" 值为：140
- "Dest 5" 值为：0
第二个下拉选项（在 selection of "Port 2" 的情况下）：
- "Dest 1" 值为：145
- "Dest 2" 值为：145
- "Dest 3" 值为：149
- "Dest 4" 值为：130
- "Dest 5" 值为：0

当前结果是，第二个下拉菜单没有选项，只有第一个 "Choose destination"。

Answer 1

您在 v-model 中分配给 selectedPortOfLoading 的值是端口的名称，因此您只分配了一个 String。但是第二个 select 元素需要 finalDestinations 属性。

我通过使用根据端口名称查找数据的计算属性让您的示例工作：

<template>
  <div>
    <select required id="porf_of_loading" name="porf_of_loading" v-model="selectedPortOfLoading">
      <option disabled selected>Choose loading port</option>
      <option v-bind:value="portOfLoading.port" v-for="(portOfLoading, key) in portsOfLoading" :key="key">{{ portOfLoading.port }}</option>
    </select>
    <label>PORT OF LOADING</label>
    <select required id="final_destination" name="final_destination" v-model="selectedFinalDestination">
      <option value="" disabled selected>Choose destination</option>
      <option v-bind:value="finalDestination[1]" 
        v-for="(finalDestination, key) in getPortsOfloading" 
        :key="key">
        {{ finalDestination[0] }}
      </option>
    </select>
    <label>FINAL DESTINATION</label>
  </div>
</template>

<script>



 export default {
  name: "App",
  data() {
    return {
      selectedPortOfLoading: [],
      selectedFinalDestination: [],
      portsOfLoading: [{
              port: 'Port 1',
              finalDestinations: [
                  ['Dest 1', 141],
                  ['Dest 2', 141],
                  ['Dest 3', 146],
                  ['Dest 4', 140],
                  ['Dest 5', 0]
              ],
              tTime: 42,
              aes: 0,
              minCbm: 1
          },
          {
              port: 'Port 2',
              finalDestinations: [
                  ['Dest 1', 145],
                  ['Dest 2', 145],
                  ['Dest 3', 149],
                  ['Dest 4', 130],
                  ['Dest 5', 0]
              ],
              tTime: 26,
              aes: 0,
              minCbm: 1
          },
          {
              port: 'Port 3',
              finalDestinations: [
                  ['Dest 1', 149],
                  ['Dest 2', 149],
                  ['Dest 3', 150],
                  ['Dest 4', 142],
                  ['Dest 5', 0]
              ],
              tTime: 31,
              aes: 0,
              minCbm: 1
          }
      ]
    }
  },
  computed: {
    getPortsOfloading() {
      if(!this.selectedPortOfLoading.length){
        return [];
      }
      return this.portsOfLoading.find(p => p.port === this.selectedPortOfLoading).finalDestinations
    }
  }
};
</script>

如何在 VUEJS 中更新第二个动态创建的级联 select（下拉）

How to update second dynamically created cascade select (dropdown) in VUEJS

html-select

drop-down-menu

vue.js