Vue.js ได้รับตัวเลือกที่เลือกใน @change

ก่อนอื่นฉันอยากจะบอกว่าฉันยังใหม่กับ Vue และนี่เป็นโครงการแรกของฉันที่เคยใช้ Vue ฉันมีคอมโบบ็อกซ์และฉันต้องการทำอะไรบางอย่างที่แตกต่างจากคอมโบบ็อกซ์ที่เลือก ฉันใช้ไฟล์ vue.html และ typescript แยกกัน นี่คือรหัสของฉัน

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

และนี่คือไฟล์ ts ของฉัน

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

วิธีรับค่าตัวเลือกที่เลือกในฟังก์ชัน typescript ของฉัน ขอบคุณ.

ใช้v-modelเพื่อผูกค่าของค่าของตัวเลือกที่เลือก นี่คือตัวอย่าง

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

อ้างอิงเพิ่มเติมสามารถมองเห็นได้จากที่นี่

@เป็นตัวเลือกทางลัดสำหรับV-บน ใช้@เฉพาะเมื่อคุณต้องการดำเนินการบางวิธี Vue เนื่องจากคุณไม่ได้เรียกใช้เมธอด Vue แต่คุณกำลังเรียกใช้ฟังก์ชันจาวาสคริปต์คุณต้องใช้แอตทริบิวต์onchangeเพื่อเรียกใช้ฟังก์ชันจาวาสคริปต์

<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);
}

หากคุณต้องการเรียกวิธี Vue ให้ทำเช่นนี้ -

<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);
    }
  }
})

คุณสามารถใช้แอตทริบิวต์ข้อมูลโมเดล vบนองค์ประกอบที่เลือกเพื่อผูกค่า

<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);
        }
    }
})

หวังว่านี่จะช่วยได้ :-)

ค่าที่เปลี่ยนแปลงจะอยู่ใน 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/vue@2.5.16/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>

คุณยังสามารถใช้v-modelสำหรับการช่วยเหลือ

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

คุณสามารถบันทึก@ change = "onChange ()" ของคุณไว้ใช้เฝ้าดู Vue คำนวณและนาฬิกาออกแบบมาเพื่อสิ่งนั้น ในกรณีที่คุณต้องการเพียงค่าและไม่ใช่องค์ประกอบเหตุการณ์ที่ซับซ้อนอื่น ๆ

สิ่งที่ต้องการ:

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