<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>