Question

我正在关注关于vuejs的Youtube教程，该教程使用laravel作为graphql服务器，前端使用vue-apollo，我被困在一个似乎可以开始工作的地方，视频中的导师相同的问题，但并没有阻止他的演示工作，但对我来说确实如此。

该演示显示了一个书籍列表，书籍分为几类，还有些书籍被标记为“特色”（booolean）。

在第一页上显示所有书籍（效果很好）。

页面顶部有一个菜单，显示“按类别分类的图书”，“所有”图书和“精选”图书。

“按类别分类的图书”仅返回所选类别中的图书。但是“所有”和“精选”图书链接返回“ TypeError：无法读取未定义的属性'books'。”

我已经剥离了页面并测试了“所有”和“功能”链接，它们确实起作用，当我拥有完整的页面时，正在返回的数据可以在控制台中看到。

我是vuejs的新手，所以这也许很简单，但我看不到！

<template>
<div class="hello">
    <ApolloQuery :query="query">
    <template slot-scope="{ result: { data, loading }, isLoading }">
        <div v-if="isLoading">Loading...</div>
        <div v-else>
            <a href="#"  @click="selectCategory('all')"  class="link-margin">All</a>
            <a href="#"  @click.prevent="selectCategory('featured')"  class="link-margin">Featured</a>
            <a href="#" v-for="category of data.categories" :key="category.id" @click.prevent="selectCategory(category.id)"  class="link-margin">
        {{ category.name }}. {{ category.id }}
      </a>
        </div>
    </template>
</ApolloQuery>
<div v-if="selectedCategory === 'all'">
    debug all
    <ApolloQuery :query="query">
        <template slot-scope="{ result: { data, loading }, isLoading }">
            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="book1 of data.books" :key="book1.id">
                    <router-link :to="`/books/${book1.id}`"> {{ book1.id }} : {{ book1.title }} </router-link>
                    <div> {{ book1.author }}</div>
                    <img :src="book1.image" alt="cover image">
            </div>
                </div>
        </template>
    </ApolloQuery>
</div>

<div v-else-if="selectedCategory === 'featured'">
    debug featured
    <ApolloQuery :query="booksFeaturedQuery" :variables="{ featured: true }">
        <template slot-scope="{ result: { data, loading }, isLoading }">

            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="bookf of data.booksByFeatured" :key="bookf.id">
                    <router-link :to="`/books/${bookf.id}`"> {{ bookf.id }} : {{ bookf.title }} </router-link>
                    <div> {{ bookf.author }}</div>
                    <img :src="bookf.image" alt="cover image">
            </div>
                </div>
        </template>
    </ApolloQuery>
</div>
<div v-else>
    <ApolloQuery :query="query" :variables="{ id: selectedCategory }">
       debug not all
        <template slot-scope="{ result: { data, loading }, isLoading }">
            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="book of data.category.books" :key="book.id">
                    <router-link :to="`/books/${book.id}`"> {{ book.id }} : {{ book.title }} </router-link>
                    <div> {{ book.author }}</div>
                    <img :src="book.image" alt="cover image">
                </div>
            </div>
        </template>
    </ApolloQuery>
</div>
    </div>
</template>

<script>
import categoryQuery from '@/graphql/queries/Category.gql'
import categoriesQuery from '@/graphql/queries/Categories.gql'
import booksQuery from '@/graphql/queries/Books.gql'
import booksFeaturedQuery from '@/graphql/queries/BooksFeatured.gql'

export default {
    name: 'app',
    components: {
},
data() {
    return {
        selectedCategory: 'all',
        query: booksQuery,
        categoryQuery,
        categoriesQuery,
        booksQuery,
        booksFeaturedQuery
    }
},
methods: {
    selectCategory(category) {
        if (category === 'all') {
            this.query = booksQuery
        } else if (category === 'featured') {
            this.query = booksFeaturedQuery
        } else {
            this.query = categoryQuery
        }
        this.selectedCategory = category
    }
}
}
</script>

视图上未显示Vuejs + Vue-Apollo重复graphql查询

0 个答案: