Vue.js erhalten ausgewählte Option auf @change

Zunächst möchte ich sagen, dass ich neu in Vue bin und dies mein erstes Projekt ist, das Vue jemals verwendet. Ich habe eine Combobox und möchte basierend auf der ausgewählten Combobox etwas anderes machen. Ich benutze separate vue.html und Typoskript-Datei. Hier ist mein Code.

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

und hier ist meine ts-Datei

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

Wie erhalte ich den ausgewählten Optionswert in meiner Typoskriptfunktion? Vielen Dank.

Verwenden Sie v-modeldiese Option, um den Wert des Werts der ausgewählten Option zu binden. Hier ist ein Beispiel .

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

Weitere Referenzen finden Sie hier .

@ ist eine Verknüpfungsoption für v-on . Verwenden Sie @ nur, wenn Sie einige Vue-Methoden ausführen möchten. Da Sie keine Vue-Methoden ausführen, sondern die Javascript-Funktion aufrufen, müssen Sie das Attribut onchange verwenden , um die Javascript-Funktion aufzurufen

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

Wenn Sie Vue-Methoden aufrufen möchten, gehen Sie folgendermaßen vor:

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

Sie können das Datenattribut v-model für das select-Element verwenden, um den Wert zu binden.

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

Hoffe das hilft :-)

Der geänderte Wert wird in sein 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>

Sie können auch das V-Modell für die Rettung verwenden

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

Sie können Ihre @ change = "onChange ()" speichern und Beobachter verwenden. Vue rechnet und schaut, es ist dafür ausgelegt. Für den Fall, dass Sie nur den Wert und keine anderen komplexen Ereignisattribute benötigen.

Etwas wie:

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