Вопросы Теги

Как получить доступ к атрибуту выбора с помощью vue?

У меня есть выбор, и я хочу получить доступ к значению и атрибуту с помощью 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;
    })
}
2
задан 27.11.2019, 18:06
1 ответ

Ты можешь перемещать его 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>
2
ответ дан 01.12.2019, 10:46