У меня есть выбор, и я хочу получить доступ к значению и атрибуту с помощью onchange. У меня есть следующий код:
<select v-model="colonia" @change="obtenerCodigoPostal($event)" class="form-control">
<option value="0" idCodigo="0">Seleccionar</option>
<option v-for="colonia in colonias" v-bind:value="colonia.id_colonia" v-bind:idCodigo="colonia.id_codigo_postal">
{{ colonia.nombre }}
</option>
</select>
В моем методе getPostalCode я хочу получить значение атрибута idCode, в настоящее время я могу получить доступ только к этому значению таким образом:
obtenerCodigoPostal: function(event){
let self = this;
console.log(event.target.idCodigo);
axios.post('obtener-codigo-postal',{
'idCodigo': event.target.value
}).then(function(response) {
self.codigoPostal = response.data;
})
}
Ты можешь перемещать его c¦digo как attributo дата :
<option v-for="colonia in colonias" v-bind:value="colonia.id_colonia" v-bind:data-codigo="colonia.id_codigo_postal">
Потом в тебе método ты получаешь c¦digo dataset отборного opci¦n:
let datasetDeLaOpcionSeleccionada = e.target.options[e.target.options.selectedIndex].dataset;
let codigo = datasetDeLaOpcionSeleccionada.codigo
const colonias = [{"id_colonia": 1, "nombre": "Some name", "id_codigo_postal": "12345"},
{"id_colonia": 5, "nombre": "Another name", "id_codigo_postal": "98765"}]
var app = new Vue({
el: "#app",
data: {
colonias,
colonia: 0
},
methods: {
obtenerCodigoPostal: function(e){
let datasetDeLaOpcionSeleccionada = e.target.options[e.target.options.selectedIndex].dataset;
alert("value: " + e.target.value + " codigo: "+datasetDeLaOpcionSeleccionada.codigo);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<select v-model="colonia" @change="obtenerCodigoPostal">
<option value="0" data-codigo="0">Seleccionar</option>
<option v-for="colonia in colonias" v-bind:value="colonia.id_colonia" v-bind:data-codigo="colonia.id_codigo_postal">
{{ colonia.nombre }}
</option>
</select>
</div>