Vue.js 在@change 上獲得選定的選項

Question

首先，我想說我是 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>

這是我的打字稿文件：

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

如何在我的 TypeScript 函數中獲取選定的選項值？ 謝謝。

Answer 1

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

從這里可以看到更多的參考。

Answer 2

@是v-on的快捷方式選項。 僅當您要執行某些 Vue 方法時才使用@ 。 由於您沒有執行 Vue 方法，而是調用 javascript 函數，因此您需要使用onchange屬性來調用 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);
}

如果你想調用 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);
    }
  }
})

您可以在 select 元素上使用v-model數據屬性來綁定值。

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

希望這可以幫助 ：-）

Answer 3

更改后的值將在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>

Answer 4

您也可以使用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>

Answer 5

onChangeMethod --> 您選擇的方法，它可以是與您的程序相關的任何內容。

<template>
<select @change="onChangeMethod($event)">                                            
  <option value="test">Test</option>
  <option value="test2">Test2</option>
</select>
</template>

<script>
 data(){
   return{
    ...
     
   }
 },
 methods:{
     onChangeMethod(event)
     {
         console.log(event.target.value);
     }
 },
 created(){
   ...
 }   
</script>                                                                          

Answer 6

您可以將@change="onChange()"保存為使用觀察者。 Vue 計算和監視，它就是為此而設計的。 如果您只需要值而不需要其他復雜的事件屬性。

就像是：

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