Vue项目中使用Vuex+GraphQL时，V-for循环无法渲染数据（控制台可见数据）的问题求助

核心问题出在你的Vuex Action中对数据的处理上——你把获取到的数组转换成了JSON字符串，而v-for需要遍历数组类型的数据，字符串无法被正确遍历，最终导致渲染的元素消失。

具体分析 #

看你portfolioList Action里的这段代码：

const portfolios = JSON.stringify(response.data.portfolios)
commit('SET_PORTFOLIOS', portfolios)

response.data.portfolios本身就是后端返回的数组数据，你却用JSON.stringify()把它转成了字符串类型。当这个字符串被存入Vuex State后，组件里的v-for="portfolio in portfolios"实际上是在遍历字符串的每个字符，而每个字符并没有id、about这些属性，所以渲染时不仅无法显示内容，还可能因为key绑定无效（portfolio.id不存在）导致整个<section>元素被Vue判定为无效而移除。

修复方案 #

直接移除JSON.stringify()，把原始数组提交给mutation即可：

修改Vuex Action中的代码：

async portfolioList({commit}){
  try{
    const response = await apolloClient.query({query: PORTFOLIO_LIST})
    // 去掉JSON.stringify，直接使用原始数组
    const portfolios = response.data.portfolios
    commit('SET_PORTFOLIOS', portfolios)
    console.log(portfolios)
  } catch(e){
    console.log(e)
  }
},

同时，建议你检查portfolioDetail Action里的代码，同样存在JSON.stringify(response.data)的问题，后续如果要使用这个数据，也需要移除这个转换。

额外验证 #

修复后，你可以在组件的computed属性里打印portfolios的类型，确认它是数组：

computed:{
  ...mapState(['portfolios']),
  // 新增一个计算属性验证类型
  portfolioType(){
    console.log(typeof this.portfolios, Array.isArray(this.portfolios))
    return Array.isArray(this.portfolios)
  }
},

如果控制台输出true，说明数据类型正确，v-for就能正常遍历渲染了。

内容的提问来源于stack exchange，提问作者Udemezue John