it-swarm.com.de

Vue.js erhalten ausgewählte Option auf @change

Zunächst möchte ich sagen, dass ich neu bei Vue bin und dies mein erstes Projekt ist, das Vue verwendet. Ich habe eine Combobox und möchte basierend auf der ausgewählten Combobox etwas anderes tun. Ich benutze separate vue.html und TypeScript-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 TypeScript-Funktion? Vielen Dank.

42
hphp

Verwenden Sie v-model, um den Wert 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 Informationen finden Sie unter hier .

76
ramwin

@ ist eine Abkürzungsoption für v-on. Verwenden Sie @ nur, wenn Sie einige Vue Methoden ausführen möchten. Da Sie keine Vue -Methoden ausführen, sondern stattdessen 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 :-)

18
santanu bera

Der geänderte Wert wird in event.target.value angezeigt.

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

Sie können auch v-model 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>
2

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

So etwas wie:

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