Как обновить второй динамически созданный каскадный выбор (выпадающий) в 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
  • «Dest 5» со значением: 0

• Опции второго раскрывающегося списка (в случае выбора «Порт 2»):

  • «Dest 1» со значением: 145
  • «Dest 2» со значением: 145
  • «Dest 3» со значением: 149
  • «Dest 4» со значением: 130
  • «Dest 5» со значением: 0

Текущий результат: во втором раскрывающемся списке нет вариантов, кроме первого «Выбрать пункт назначения».

Answer 1

Значение, которое вы присваиваете selectedPortOfLoading в v-model, является именем порта, поэтому вы присваиваете только 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>