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

Question

Tout d'abord, je veux dire que je suis nouveau sur Vue, et c'est mon premier projet utilisant Vue. J'ai une zone de liste déroulante et je veux faire quelque chose de différent en fonction de la zone de liste déroulante sélectionnée. J'utilise un fichier vue.html et typographique séparé. 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 d'option sélectionnée dans ma fonction dactylographiée? Merci.

Answer 1

Utilisez v-model pour lier la valeur de 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érence peut être vue d' ici .

Answer 2

@ est une option de raccourci pour v-sur. Utiliser @ uniquement lorsque vous souhaitez exécuter certaines méthodes de Vue. Comme vous n'êtes pas de l'exécution de Vue des méthodes, au contraire, vous l'appel de fonction javascript, vous devez utiliser onchange attribut à l'appel de la fonction 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);
}

Si vous voulez l'appeler de Vue des méthodes, le faire de cette façon-

<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 v-modèle de données de l'attribut de 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);
        }
    }
})

Espérons que cela Aide :-)

Answer 3

La valeur modifiée sera en 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

Vous pouvez également utiliser v-model 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>
 

Answer 5

Vous pouvez enregistrer votre @ change = "onChange ()" et utiliser des observateurs. Vue calcule et regarde, il est conçu pour ça. Dans le cas où vous n'avez 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)
     }
  }