Primero, quiero decir que soy nuevo en Vue, y este es mi primer proyecto usando Vue.
Tengo un cuadro combinado y quiero hacer algo diferente según el cuadro combinado seleccionado. Uso un archivo vue.html y TypeScript separado. Aquí está mi código:
<select name="LeaveType" @change="onChange()" class="form-control"> <option value="1">Annual Leave/ Off-Day</option> <option value="2">On Demand Leave</option> </select>Aquí está mi archivo TypeScript:
onChange(value) { console.log(value); }¿Cómo obtengo el valor de la opción seleccionada en mi función TypeScript? Gracias.
Use v-model para vincular el valor del valor de la opción seleccionada. Aquí hay un ejemplo .
<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>Se pueden ver más referencias desde aquí .
@ es una opción de acceso directo para v-on . Use @ solo cuando desee ejecutar algunos métodos de Vue. Como no está ejecutando métodos Vue, sino que está llamando a la función javascript, debe usar el atributo onchange para llamar a la función 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 desea llamar a los métodos de Vue, hágalo así:
<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); } } })Puede usar el atributo de datos del modelo v en el elemento seleccionado para vincular el valor.
<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); } } })Espero que esto ayude :-)
El valor modificado estará 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>También puedes usar v-model para el rescate.
<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>Puede guardar su @change="onChange()" y usar observadores. Vue computa y observa, está diseñado para eso. En caso de que solo necesite el valor y no otros atributos complejos del Evento.
Algo como:
... watch: { leaveType () { this.whateverMethod(this.leaveType) } }, methods: { onChange() { console.log('The new value is: ', this.leaveType) } }onChangeMethod --> método de su elección, puede ser cualquier cosa relacionada con su programa.
<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>