数据出现在控制台中，但在我使用 V-for 循环Vuex 和 GraphQl时不呈现

如何解决数据出现在控制台中，但在我使用 V-for 循环Vuex 和 GraphQl时不呈现

我目前在我的 vue JS 项目中使用 GraphQL 和 Vuex 设置我的项目，我能够从我的 Django 后端调用我的数据但是，当我尝试使用 V-for 循环渲染数据时出现错误Vue.js。元素就消失了。

这是我的 GraphQL 设置。

// Apollo client Setup

import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink } from 'apollo-link'
import VueApollo from 'vue-apollo'

// import { USER_ID,AUTH_TOKEN } from './constants/settings'



const authMiddleware = new ApolloLink((operation,forward) => {
  // add the authorization to the headers
  const token = localStorage.getItem(AUTH_TOKEN)
  operation.setContext({
    headers: {
      authorization: token ? `JWT ${token}` : null
    }
  })

  return forward(operation)
})


// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://127.0.0.1:8000/graphql',})

// Cache implementation
const cache = new InMemoryCache()



// Create the apollo client
export const apolloClient = new ApolloClient({
 
  link: httpLink,cache,connectToDevTools: true,})


const apolloProvider = new VueApollo({
  defaultClient: apolloClient,})

Vue.use(VueApollo)

export default apolloProvider

这是我的 Vuex 商店中的设置

import { apolloClient } from '../../apollo'
import {PORTFOLIO_LIST} from '../../graph/queries.js'


const state =  {

    portfolios:[],portfolio:'',};


const getters = {

    allPortfolios:(state) => state.portfolios,};


const mutations = {

    SET_PORTFOLIOS(state,portfolios){

        state.portfolios = portfolios
    },SET_PORTFOLIO(state,portfolio){

        state.portfolio = portfolio
    }

};

const actions = {

 // The Portfolio list API 

async portfolioList({commit}){

    try{


        const response = await apolloClient.query({query: PORTFOLIO_LIST})
        const portfolios = JSON.stringify(response.data.portfolios)
        commit('SET_PORTFOLIOS',portfolios)

        console.log(portfolios)

    }
    catch(e){

        console.log(e)
    }

},// The Portfolio Detail API

async portfolioDetail({commit},){

    try{

        const response  =  await apolloClient.query()
        const portfolio = JSON.stringify(response.data)
        console.log(portfolio)
        commit ('SET_PORTFOLIO',portfolio)
    }
    catch(e){

        console.log(e)
    }
},//The Portfolio Create API

// async portfolioCreate({commit},...portfolioDetail){


// },// The Portfolio Delete API

// async portfolioDelete({commit}){


// },};


export default {

    state,getters,mutations,actions,}

最后这里是我调用 Vue Js for 循环的地方

<template>
    
    <div class="px-6 lg:px-32 h-screen">

        <section v-for ="portfolio in portfolios" :key="portfolio.id" class="mt-24 grid lg:grid-cols-3" >


        <!--    The card section -->
        
            <div>
                {{portfolio.about}}
            </div>

        <!-- End of the card section -->
            

        
            


        </section>
        

    </div>


</template>


<script>

import { mapState} from 'vuex';

export default {


computed:{

    ...mapState(['portfolios']),},created(){
        

    this.$store.dispatch('portfolioList');

    
    }

}
    


</script>

我在 Vue JS 开发工具中得到响应，但它没有在我的 Vue js 代码中迭代

当我打开控制台时，我迭代的部分就消失了