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

Question

I am creating a calculator application in VueJS reacting to the user select. This application has no backend, all variables and data are part of the front end. Options for drop-down select are predefined in a single JSON definition. I am free to redefine/split this JSON according to my needs, it is not fixed.

The user story is:

The user selects the cargo delivery loading port in the first drop-down select (loaded from JSON).
The second drop-down select is cargo delivery destination and it is updated from the JSON definition based on the selection in the first drop-down (Array of destination names and prices. Destination names are the same, can be added/removed in the future, the price is different)
The user selects cargo delivery destination and there will be value in this selection equals the number related to the destination port (taken from the array).

I have tried to load the second drop-down from the selected value in the first drop-down, but there is no result.

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

Expected result:

First Drop-Down options:
- "Port 1"
- "Port 2"
- "Port 3"
Second Drop-Down options (in case of selection of "Port 1"):
- "Dest 1" with value: 141
- "Dest 2" with value: 141
- "Dest 3" with value: 146
- "Dest 4" with value: 140
- "Dest 5" with value: 0
Second Drop-Down options (in case of selection of "Port 2"):
- "Dest 1" with value: 145
- "Dest 2" with value: 145
- "Dest 3" with value: 149
- "Dest 4" with value: 130
- "Dest 5" with value: 0

The current result is, the second drop-down has no options but first "Choose destination".

Djurdjen · Accepted Answer · 2019-10-28 16:02:22Z

The value you are assigning to selectedPortOfLoading in the v-model is the name of the port so you are only assigning a String. But yet the second select element expects the finalDestinations property.

I got your example working by using a computed property that looks for the data depending on the port name:

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

Hi, thanx a lot for your help, unfortunately, I am not able to make it work. I am VueJS / Javascript beginner. Here is the fiddle code based on your suggestion, I am able to select first select drop-down, but the second still shows no options. jsfiddle.net/david_lister/9axz6t42/2 Would you be so kind and check it?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related