如何在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"(：

  • "Dest 1"，值：141
  • "Dest 2"，值：141
  • "Dest 3"，值：146
  • "Dest 4"，值：140
  • 值为0的"Dest 5">

• 第二个下拉选项(如果选择"端口2"(：

  • "Dest 1"，值：145
  • "Dest 2"，值：145
  • "Dest 3"，值：149
  • "Dest 4"，值：130
  • 值为0的"Dest 5">

当前结果是，第二个下拉菜单没有选项，只有第一个"选择目的地"。

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>