programing

Vuetify v-select onchange 이벤트가 현재 대신 이전에 선택한 값을 반환함

kingscode 2022. 7. 15. 22:11
반응형

Vuetify v-select onchange 이벤트가 현재 대신 이전에 선택한 값을 반환함

나는 가지고 있다<v-select>다른 페이지로 이동하기 위한 URL 목록으로 사용하는 드롭다운.제가 직면한 문제는onchange사용 중인 event는 현재 선택한 값 대신 이전에 선택한 값을 반환합니다.

테스트 대신 콘솔에 인쇄하도록 코드를 수정했습니다.:hint이 기능은 정상적으로 동작하고 있기 때문에, 이 기능에는onchange기능.

코드펜

코드는 다음과 같습니다.

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

데이터를 지정할 필요는 없습니다.그것은 변경 이벤트가 기본적으로 통과하기 때문입니다.

변경:

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

딱 맞게

v-on:change="changeRoute"

함수 호출:

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

나는 이유를 모르겠다.change제대로 작동하지 않습니다.그렇지만input동작합니다.

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

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

Vuetify에 대한 새로운 버그 보고서를 열 수 있습니다.

${select.src}이(가) 변경 이벤트의 이전 값을 보유하고 있는 이유를 정확히 알 수 없습니다.다음 코드를 사용하여 시험해 볼 수 있습니다.

<v-select @change="changeRoute" ></v-select>

methods: {
      changeRoute(selectObj) {
        console.log(selectObj)
        console.log(selectObj.src)
     }
}

언급URL : https://stackoverflow.com/questions/50073919/vuetify-v-select-onchange-event-returns-previously-selected-value-instead-of-cur

반응형