Выберите получить значение атрибута данных и вставить как вариант выбора

Question

Я новичок в Vuejs. Требование здесь, из бэкэнда они будут конфигурировать значения временного интервала в атрибуты времени данных в формате массива.

Мне нужно извлечь и обновить этот временной интервал в зависимости от выбранного местоположения.

Если Location 1 установлено selected, опция data-times - 10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM должна быть вставлена ​​как значение опции в select name=time.

Кроме того, если параметр запроса ?l=loc1 существует .. нам нужно предварительно выбрать select name=location и выбрать name=time необходимо измените временной интервал соответственно.

Не знаю, как вывести этот лог c через Vuejs. Есть ли какой-нибудь способ добиться этого ожидаемого поведения?

<select name="location" class="chosen-select select-picker select-picker-link" aria-required="true" aria-invalid="false">
    <option value="" disabled="disabled" selected="selected">Please select location</option>
    <option value="loc1" data-times="['10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM']">Location 1</option>
    <option value="loc2" data-times="['11:00 AM - 12:00 PM, 12:00 PM - 1:00 PM']">Location 2</option>
    <option value="loc3" data-times="['10:00 AM - 11:00 AM, 10:30 AM - 11:30 AM, 11:30 AM - 12:30 PM']">Location 3</option>
</select>


<select name="time" class="chosen-select select-picker select-picker-link" aria-required="true" aria-invalid="false">
    <option value="" disabled="disabled" selected="selected">Please select a timeslot</option>
    <option value="10:00 AM - 11:00 AM">10:00 AM - 11:00 AM</option>
    <option value="10:30 AM - 11:30 AM">10:30 AM - 11:30 AM</option>
    <option value="11:00 AM - 12:00 PM">11:00 AM - 12:00 PM</option>
</select>

Answer 1

Предполагая, что вам разрешено вносить незначительные изменения в значение, введенное в атрибут data-times (необходимое для упрощения синтаксического анализа), вы можете просто использовать v-model, а затем настроить наблюдатель для свойства данных, используемого в v-model привязка раскрывающегося списка местоположения.

Проверка строки запроса, это вопрос проверки window.location.search и последующего анализа с помощью URLSearchParams. Если значение истинно, мы можем использовать его для установки значения в v-model. Поскольку все является реактивным, любые изменения / мутации значения v-model будут обновлять второй раскрывающийся список выбора.

Ознакомьтесь с доказательством концепции ниже:

new Vue({
  el: '#app',
  data: function() {
    return {
      location: '',
      time: '',
      times: []
    };
  },
  mounted() {
    // Parse `?l=<LOCATION>` during app mounted hook
    // For testing, you can try:
    // const query = new URLSearchParams('?l=loc3');
    const query = new URLSearchParams(window.location.search);
    if (query.get('l')) {
      this.location = query.get('l');
    }
  },
  watch: {
    location: {
      immediate: true,
      handler: async function() {
      
        // Wait for DOM to update before attempting to access DOM elements
        await this.$nextTick();
        
        // Reset selection in time
        this.time = '';

        // Re-populated array of available times
        this.times = this.$refs.locationEl.selectedOptions[0].dataset.times.split(',');
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select name="location" v-model="location" ref="locationEl">
    <option value="" disabled="disabled" selected="selected">Please select location</option>
    <option value="loc1" data-times="10:00 AM - 11:00 AM,10:30 AM - 11:30 AM">Location 1</option>
    <option value="loc2" data-times="11:00 AM - 12:00 PM,12:00 PM - 1:00 PM">Location 2</option>
    <option value="loc3" data-times="10:00 AM - 11:00 AM,10:30 AM - 11:30 AM, 11:30 AM - 12:30 PM">Location 3</option>
  </select>


  <select name="time" v-model="time">
    <option value="" disabled="disabled" selected="selected">Please select a timeslot</option>
    <option v-for="(time, i) in times" v-bind:key="i" v-bind:value="time">{{ time }}</option>
  </select>

  <ul>
    <li><strong>Location:</strong> {{ location }}</li>
    <li><strong>Time:</strong> {{ time }}</li>
  </ul>
</div>