Блог

У меня есть поле выбора в Vue.js это заполняется динамически, в результате HTTP-запроса. Я прослушиваю @change событие для запуска некоторого процедурного кода, однако это @change событие срабатывает только тогда, когда пользователь вносит изменения. Он не улавливает начальное событие, которое происходит, когда поле выбора заполнено и выбрано значение.

Вот мой код:

 const app = Vue.createApp({
  methods: {
    handleSelectSize(size) {
      console.log('handleSelectSize', size.target.value);
      const sizeLabels = {
        'S': 'small',
        'M': 'medium',
        'L': 'large'
      };
      this.label = sizeLabels[size.target.value];
    }
  },
  data() {
    return {
        selectedSize: 'M',
      label: '',
        sizeOptions: null
    }
  },
  mounted() {
    window.setTimeout(() => {
        // Dynamically create values for dropdown
        this.sizeOptions = ['S', 'M', 'L'];
    }, 500);
      
  }
});

app.mount('#myApp'); 

 <script src="https://unpkg.com/vue@next" ></script>

<div id="myApp">
  <label>Select Size
    <select v-model="selectedSize" @change="handleSelectSize($event)">
      <option v-for="size in sizeOptions" v-bind:value="size">
        {{ size }}
      </option>
    </select>
  </label>
  <div>
    The current size is {{label}}
  </div>
</div> 

В @change компоненте выбора есть обработчик, который обновляет .label свойство. В .label выводимом тексте используется свойство: «текущий размер равен {{label}}».

Проблема в том, что @change не срабатывает при первом заполнении поля выбора. Если вы измените его вручную, он будет работать нормально.

Как я могу уловить начальное изменение и в поле выбора?

причина в том, что значение параметра selectedSize не меняется, меняются только параметры. я предложу использовать вычисленное для метки, чтобы вы могли пропустить @change событие

 data(){
   return {
       selectedSize: 'M',
       sizeLabels = {
         'S': 'small',
         'M': 'medium',
         'L': 'large'
       },
       selectedOptions: [] // better initialized this with array           
   }
},
computed:{
   label(){
       return this.selectedOptions.length ? 
         this.selectedOptions[this.selectedSize] // please handle also if key can not be found 
         : ''
    }
}
 

еще лучше получить метку также для каждого параметра

 window.setTimeout(() => {
    // Dynamically create values for dropdown
    this.sizeOptions = [{label: 'foo', 'value': 'bar'}, etc];
}, 500);