Vue.js nhận tùy chọn đã chọn trên @change

Đầu tiên, tôi muốn nói rằng tôi là người mới đối với Vue, và đây là dự án đầu tiên của tôi sử dụng Vue. Tôi có combobox và tôi muốn làm điều gì đó khác biệt dựa trên combobox đã chọn. Tôi sử dụng tệp vue.html và tệp typecript riêng. Đây là mã của tôi.

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

và đây là tệp ts của tôi

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

Làm cách nào để nhận giá trị tùy chọn đã chọn trong hàm sắp chữ của tôi? Cảm ơn.

Sử dụng v-modelđể ràng buộc giá trị của giá trị của tùy chọn đã chọn. Đây là một ví dụ .

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

Tham khảo thêm có thể được nhìn thấy từ đây .

@ là một tùy chọn phím tắt cho v-on . Chỉ sử dụng @ khi bạn muốn thực thi một số phương thức Vue. Vì bạn không thực thi các phương thức Vue, thay vào đó bạn đang gọi hàm javascript, bạn cần sử dụng thuộc tính onchange để gọi hàm 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);
}

Nếu bạn muốn gọi các phương thức Vue, hãy làm như thế này-

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

Bạn có thể sử dụng thuộc tính dữ liệu v-model trên phần tử select để liên kết giá trị.

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

Hi vọng điêu nay co ich :-)

Giá trị đã thay đổi sẽ ở 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>

Bạn cũng có thể sử dụng mô hình v để giải cứu

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

Bạn có thể lưu @ change = "onChange ()" của mình vào một trình theo dõi sử dụng. Vue tính toán và đồng hồ, nó được thiết kế cho điều đó. Trong trường hợp bạn chỉ cần giá trị chứ không cần các thuộc tính Sự kiện phức tạp khác.

Cái gì đó như:

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