web-dev-qa-db-fra.com

Vue.js obtient l'option sélectionnée sur @change

Tout d’abord, je tiens à dire que je suis nouveau dans Vue, et c’est mon premier projet utilisant Vue. J'ai une liste déroulante et je veux faire quelque chose de différent en fonction de la liste déroulante sélectionnée. J'utilise les fichiers séparés vue.html et TypeScript. Voici mon 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>

et voici mon fichier ts

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

Comment obtenir la valeur de l'option sélectionnée dans ma fonction TypeScript? Merci.

javascripthtmlasp.net-mvcvue.js
42
hphp

Utilisez v-model pour lier la valeur de l'option sélectionnée. Voici un exemple .

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

Plus de références peuvent être vues à partir de ici .

76
ramwin

@ est une option de raccourci pour v-on. Utilisez @ uniquement lorsque vous souhaitez exécuter certaines méthodes Vue. Comme vous n'exécutez pas les méthodes Vue, vous appelez à la place une fonction javascript, vous devez utiliser l'attribut onchange pour appeler cette fonction.

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

Si vous voulez appeler les méthodes Vue, faites-le comme ceci-

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

Vous pouvez utiliser l'attribut de données v-model sur l'élément select pour lier la valeur.

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

J'espère que cela t'aides :-)

18
santanu bera

La valeur modifiée sera dans 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/[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
Boy With Silver Wings

Vous pouvez également utiliser modèle v pour le sauvetage

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

Vous pouvez enregistrer vos @ change = "onChange ()" une utilisation. Vue calcule et regarde, il est conçu pour cela. Au cas où vous n’auriez besoin que de la valeur et non d’autres attributs d’événement complexes.

Quelque chose comme:

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