Vue.js mendapatkan opsi yang dipilih di @change

Pertama, saya ingin mengatakan bahwa saya baru mengenal Vue, dan ini adalah proyek pertama saya yang menggunakan Vue. Saya memiliki kotak kombo dan saya ingin melakukan sesuatu yang berbeda berdasarkan kotak kombo yang dipilih. Saya menggunakan file vue.html dan skrip terpisah. Ini kode saya.

<select name="LeaveType" @change="onChange()" class="form-control">
     <option value="1">Annual Leave/ Off-Day</option>
     <option value="2">On Demand Leave</option>
</select>

dan inilah file ts saya

onChange(value) {
    console.log(value);
}

Bagaimana cara mendapatkan nilai opsi yang dipilih dalam fungsi skrip ketikan saya? Terima kasih.

Gunakan v-modeluntuk mengikat nilai dari nilai opsi yang dipilih. Berikut ini contohnya .

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

Referensi lebih lanjut dapat dilihat dari sini .

@ adalah opsi pintasan untuk v-on . Gunakan @ hanya jika Anda ingin menjalankan beberapa metode Vue. Karena Anda tidak menjalankan metode Vue, sebagai gantinya Anda memanggil fungsi javascript, Anda perlu menggunakan atribut onchange untuk memanggil fungsi javascript

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

function onChange(value) {
  console.log(value);
}

Jika Anda ingin memanggil metode Vue, lakukan seperti ini-

<select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

Anda dapat menggunakan atribut data v-model pada elemen pilih untuk mengikat nilai.

<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

Semoga ini membantu :-)

Nilai yang diubah akan masuk event.target.value

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <select name="LeaveType" @change="onChange" class="form-control">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
</div>

Anda juga dapat menggunakan v-model untuk penyelamatan

<template>
    <select name="LeaveType" v-model="leaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            leaveType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.leaveType)
        }
    }
}
</script>

Anda dapat menyimpan @ change = "onChange ()" Anda sebagai pengamat penggunaan. Vue menghitung dan jam tangan, dirancang untuk itu. Jika Anda hanya membutuhkan nilai dan bukan atribut Acara kompleks lainnya.

Sesuatu seperti:

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }