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

Question

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

用户故事是：

1. 用户在第一个下拉选择（从JSON中加载）中选择了货物加载端口。
2. 第二个下拉选择是货物的目的地，它根据第一个下拉列表中的选择从JSON定义进行更新（目的地名称和价格的数组。目的地名称相同，可以在以下位置添加/删除未来，价格会有所不同）
3. 用户选择货运目的地，此选择中的值将等于与目的地港口相关的编号（从数组中获取）。

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

<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
        }
    ]
}

预期结果：

• 第一个下拉选项：

  • “端口1”
  • “端口2”
  • “端口3”

• 第二个下拉选项（在选择“端口1”的情况下：]

  • “目标1”，值：141
  • “目标2”，值：141
  • “目标3”，​​值：146
  • “目标4”，值：140
  • “目标5”，值：0

• 第二个下拉选项（选择“端口2”时：]

  • “目标1”，值：145
  • “目标2”，值：145
  • “目标3”，​​值：149
  • “目标4”，值：130
  • “目标5”，值：0

当前结果是，第二个下拉列表没有选项，只有第一个“选择目的地”。

Answer 1

您在selectedPortOfLoading中分配给v-model的值是端口的名称，因此您仅分配String。但是第二个选择元素仍需要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>