Question

我有一个带有v选择的对话框，在整个页面加载后，下拉菜单中没有显示值。在修改组件文件触发热模块重新加载后，它可以正常工作。

使用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中对响应和状态进行了显示，该信息位于计算的路由属性中。

我想念什么？

Answer 1

听起来您的问题出在vue实例生命周期内的某个地方，即您可能在错误的钩子内调用this.downloadRoutes（）。如果尝试使用硬编码的Routes数组，还会发生问题吗？

Answer 2

发现了问题。

我的商店通过initialState函数初始化。

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

初始状态函数声明状态中使用的所有顶级集合。

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

在该初始状态下添加路由即可解决问题。

我认为这是因为在将新属性添加到状态时未添加状态观察者。

当我进行整页刷新时，将在初始化选择之后将路由添加到状态，因此它不会监视更改。在热模块重新加载期间，路由已处于状态，并且已由选择器拾取。

完全刷新后，Vuetify v-select不显示项目

2 个答案: