Vue.js Listen to Select Change Event

Aug 20, 2018
<template><form>  <div class="form-row">    <div class="col-sm-4 col-md-4 col-lg-3">      <label class="mt-2 mt-sm-0" for="inputPlace">Place</label>      <select class="custom-select mr-sm-2" id="inputPlace" v-model="place_url_name" @change="onPlaceChanged">        <option value="">All</option>        <option value="japan">Japan</option>        <option value="taiwan">Taiwan</option>      </select>    </div>  </form></form></template>

Listen to @change event.

<script>export default {  data() {    return {      place_url_name: 'japan',    }  },  methods: {    onPlaceChanged() {      console.log(this.place_url_name)    },  }}</script>

Alternatively, you can also watch place_url_name for changes.

<script>export default {  ...  watch: {    place_url_name(val) {      console.log(this.place_url_name)    },  },}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.