vue.js - How to listen for the initial change event from a select box that is dynamically populated

Question

I have a select box in Vue.js that is populated dynamically, as a result of an HTTP request. I am listening for the @change event to run some procedural code, however that @change event only triggers when user makes a change. It doesn't catch the initial event that happens when the select box is populated, and a value is selected.

Here's my code:

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>

question from:https://stackoverflow.com/questions/65836725/how-to-listen-for-the-initial-change-event-from-a-select-box-that-is-dynamically

Answer 1

the reason is, the value of the selectedSize is not changing, only the options. i will suggest to use computed for the label so you can omit @change event

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 
         : ''
    }
}

better yet to get label also for each options

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