Vuetify v-seleccione el evento onchange devuelve seleccionado previamente el valor en lugar de la actual

Tengo un <v-select> desplegable en el que estoy queriendo utilizar como una lista de direcciones Url para navegar a otras páginas. El problema que me estoy quedando en el onchangecaso estoy usando devuelve el seleccionado previamente el valor en lugar de la actual valor seleccionado.

He ajustado el código de impresión de la consola en lugar de la prueba. El :hint funcionalidad funciona bien, así que estoy seguro de que es algo para hacer con el onchange función.

Codepen

Aquí está el código:

<template>
  <v-app>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs6>
        <v-select
          :items="items"
          v-model="select"
          label="Select"
          single-line
          item-text="report"
          item-value="src"
          return-object
          persistent-hint
          v-on:change="changeRoute(`${select.src}`)"
          :hint="`${select.src}`"
        ></v-select>
      </v-flex>
    </v-layout>
  </v-container>
</v-app>
</template>

<script>
/* eslint-disable */
    new Vue({
  el: '#app',
  data () {
      return {
        select: { report: 'Rep1', src: '/rep1' },
        items: [
          { report: 'Rep1', src: '/rep1' },
          { report: 'Rep2', src: '/rep2' }
        ]
      }
    },
    methods: {
      changeRoute(a) {
        //this.$router.push({path: a })
        console.log(a)
      }
    }
})
</script>

3 Kommentare

  1. 15

    No es necesario especificar los datos porque eso es lo que estoy suponiendo que el evento de cambio pasa de forma predeterminada.

    Para el cambio:

    v-on:change="changeRoute(`${select.src}`)"

    a sólo

    v-on:change="changeRoute"

    y en la llamada a la función:

      changeRoute(a) {
        this.$router.push({path: a.src })
        console.log(a)
      }
  2. 10

    Tengo ni idea de por qué change no funciona correctamente. Pero input funciona.

    https://codepen.io/jacobgoh101/pen/erBwKa?editors=1011

    v-on:input="changeRoute(`${select.src}`)"

    Tal vez usted puede abrir un nuevo informe de error para Vuetify

    • Creo que no es un error tho. Es sólo que en change pasar un argumento cuando el cambio se activa, pero aún no se han actualizado, por lo que el argumento es todavía el valor antiguo. input se activa sólo después de que valor es actualizado, así funciona.
    • pero incluso cuando yo uso this.select.src en el controlador de eventos de cambio, devuelve el valor antiguo. por eso creo que es un bug.
    • También es incorrecto, porque entonces usted debe utilizar $nextTick
    • no hay ninguna razón apropiada que $nextTick debería ser necesario. eso es para DOM actualización. this.select.src debe ser cambiado de forma instantánea. cuando me cambie el código para seleccionar, normal, change funciona codepen.io/jacobgoh101/pen/aGpzmm?los editores=1111. en vuetify, no funciona codepen.io/anon/pen/PebrqW?los editores=1011 . trabaja para una selección, pero no para vuetify seleccionar, todavía no es un bug ?
    • Hmm yo podría estar equivocado, pero creo que no se puede comparar porque vuetify usa su propio personalizado seleccionar el componente, por lo tanto los eventos podrían no ser la misma.
  3. 3

    Yo no exctly sé por qué ${seleccionar.src} es la que mantiene el valor anterior en el evento de cambio.
    Usted puede darle una oportunidad con el siguiente código:

    <v-select @change="changeRoute" ></v-select>
    
    methods: {
          changeRoute(selectObj) {
            console.log(selectObj)
            console.log(selectObj.src)
         }
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea