问题描述
我目前在我的 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 代码中迭代
当我打开控制台时,我迭代的部分就消失了
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)