2

Tengo un select y quiero acceder al value y al un atributo con onchange. Tengo el siguiente código:

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

En mi método obtenerCodigoPostal quiero obtener el valor del atributo idCodigo, actualmente solo puedo acceder al value de esta manera:

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

1 respuesta 1

2

Puedes pasarle el código como attributo data:

<option v-for="colonia in colonias" v-bind:value="colonia.id_colonia" v-bind:data-codigo="colonia.id_codigo_postal">

Luego en tu método obtienes el código del dataset de la opción seleccionada:

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/[email protected]/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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.