전체 새로 고침 후 항목이 표시되지 않는 Vuetify v-select

전체 새로 고침 후 항목이 표시되지 않는 Vuetify v-select

전체 페이지 로드 후 드롭다운에 값이 표시되지 않는 v-select 대화상자가 있습니다.컴포넌트 파일을 수정하여 핫모듈 새로고침이 트리거된 후 동작합니다.

vuetify 사용:

"vuetify": "^1.5.17",

구성 요소 내용: 템플릿 코드:

  <v-select
      :items="routes"
      label="Routes"
      multiple
      chips
      persistent-hint
      hint="Send to which routes"
      v-model="message.routes"
  ></v-select>

routes는 계산된 속성입니다.

routes: {
  get() {
    return this.$store.state.routes
  }
}

생성된 이벤트에서 데이터가 다운로드됩니다.

  created() {
    this.downloadRoutes()
  }

이것은 반환된 목록을 커밋하는 AJAX 콜을 실행하는 스토어 메서드에 매핑됩니다.

downloadRoutes({ commit, state }) {
  return new Promise((resolve, reject) => {
    commit('SET_LOADING', true)
    api.get('/route').then(response => {
      var routes = response.data.routes

      commit('SET_ROUTES', routes)
      commit('SET_LOADING', false)
      resolve()
    })
      .catch(function(error) {
        commit('SET_LOADING', false)
        reject()
      })
  })
},

AJAX 응답은 루트의 배열에 불과합니다.

{"routes":["Route1","Route2","RouteXX"]}

이것은 console.log 응답과 계산된 루트 속성의 상태를 실행함으로써 알 수 있습니다.

제가 무엇을 빠뜨리고 있나요?

문제가 vue 인스턴스의 라이프 사이클 내부에 있는 것처럼 들립니다.즉, 잘못된 훅 안에서 이 .downloadRoutes()를 호출할 수 있습니다.하드코드된 루트 배열로 시도해도 문제가 발생합니까?

문제를 발견했다.

내 스토어는 initialState 함수를 통해 초기화됩니다.

export default new Vuex.Store({
  state: initialState,
  getters: {
  ......

초기 상태 함수는 상태에서 사용되는 모든 최상위 컬렉션을 선언합니다.

function initialState() {
  return {
    fullName: localStorage.fullName,
    routes: [] // Was missing
}

이 초기 상태의 루트를 추가하면 문제가 해결됩니다.

새로운 속성이 스테이트에 추가되었을 때, 워치 온 스테이트가 추가되지 않기 때문이라고 생각합니다.

페이지 전체를 새로 고치면 선택 초기화 후 루트가 스테이트로 추가되므로 변경은 감시되지 않습니다.핫 모듈 새로고침 중에 루트는 이미 스테이트가 되어 있기 때문에 선택자에 의해 선택됩니다.

언급URL : https://stackoverflow.com/questions/57550420/vuetify-v-select-not-showing-items-after-full-refresh