Vue警告：props 'items'类型错误（期望数组却得到对象）排查求助

核心问题 #

v-autocomplete的items属性要求传入数组，但你的代码最终给它赋值的是一个对象（甚至可能是undefined），触发了类型检查失败的警告。

具体问题点 #

1. 接口数据提取错误：接口返回的是包含data数组的外层对象（{data: [...]}），但你在service中直接把整个外层对象response.data提交到store，没有提取里面的response.data.data数组。
2. 重复提交与返回值缺失：service中的fetchDatabases函数在then回调里没有返回数据，导致store的action后续拿到的是undefined，并再次提交到store覆盖之前的对象数据。

修复方案 #

方案1：统一在store action中处理数据（推荐）

1. 修改Endpoint Service代码

移除service中的store提交逻辑，只负责请求并返回正确的数组：

fetchDatabases (server_name) {
  const url = `/servers/${server_name.serverName}/edms`
  return this.handleAPICall(API.get(url))
    .then(function (response) {
      // 返回接口内层的data数组
      return response.data.data
    })
    .catch(function (error) {
      console.error(error)
      throw error // 抛出错误让action处理
    })
},

2. 修改Store.js的action

在action中先清空数据，再处理返回的数组并提交：

actions: {
  // load EDM database
  loadDatabases({commit}, serverName) {
    commit('fetchDatabaseData', []) // 先清空数组
    return edm_reporter_service.fetchDatabases(serverName).then((databases) => {
      commit('fetchDatabaseData', databases)
    })
  },
}

方案2：修正service中的数据提交

如果要保留service中的提交逻辑，需修正数据提取并返回正确值：

fetchDatabases (server_name) {
  store.commit('fetchDatabaseData', [])
  const url = `/servers/${server_name.serverName}/edms`
  return this.handleAPICall(API.get(url))
    .then(function (response) {
      const databases = response.data.data // 提取内层数组
      store.commit('fetchDatabaseData', databases)
      return databases // 返回数据避免action提交undefined
    })
    .catch(function (error) {
      console.error(error)
      throw error
    })
},

同时修改Store.js的action，移除重复提交：

actions: {
  // load EDM database
  loadDatabases({commit}, serverName) {
    return edm_reporter_service.fetchDatabases(serverName)
  },
}

验证 #

修复后，databaseData会始终保持数组类型，v-autocomplete的items属性就能拿到符合要求的数据，警告会消失。

内容的提问来源于stack exchange，提问作者B. Youngman