Vue Get Value of Select

by karlovac

HTML

<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>
  
  <button @click="getCurrentSize">
  Get current size
  </button>
</div>

JavaScript

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];
    },
    getCurrentSize() {
      console.log('selectedSize is', this.selectedSize);
      console.log('label is', this.label);
    }
  },
  data() {
  	return {
    	selectedSize: 'M',
      label: '',
  		sizeOptions: null
    }
  },
  mounted() {
  	window.setTimeout(() => {
    	// Dynamically create values for dropdown
    	this.sizeOptions = ['S', 'M', 'L'];
    }, 500);
	  
  }
});

app.mount('#myApp');