尝试在 Nuxtjs 中使用 slug 路由文章时 _vm 未定义

Question

我在尝试文章时收到此错误

我正在使用 Strapi 并从 API (http://localhost:1337/articles?slug=thanks-for-giving-this-starter-a-try) 获取它

    {
            "id": "1",
            "title": "Thanks for giving this Starter a try!",
            "content": "# Thanks\n We hope that this starter will make you want to discover Strapi in more details.\n \n ## Features\n \n - 2 Content types: Article, Category\n - Permissions set to 'true' for article and category\n - 2 Created Articles\n - 3 Created categories\n - Responsive design using UIkit\n \n ## Pages\n \n - \"/\" display every articles\n - \"/article/:id\" display one article\n - \"/category/:id\" display articles depending on the category",
            "image": {
                "url": "/uploads/blog-header-network_2d221554a0.jpeg",
                "__typename": "UploadFile"
            },
            "category": {
                "name": "news",
                "__typename": "Category"
            },
            "slug": "thanks-for-giving-this-starter-a-try",
            "__typename": "Article"
        },
        {
            "id": "2",
            "title": "Enjoy!",
            "content": "Have fun!",
            "image": {
                "url": "/uploads/blog-header-balloon_78ab5ccd12.jpeg",
                "__typename": "UploadFile"
            },
            "category": {
                "name": "trends",
                "__typename": "Category"
            },
            "slug": "enjoy",
            "__typename": "Article"
        }

我的结构

这是我的文章.gpl

    query Articles($slug: String!) {
      article(slug: $slug) {
        id
        title
        content
        image {
          url
        }
        published_at
        slug
      }
    }

和articles.gpl

    query Articles {
      articles {
        id
        title
        content
        image {
          url
        }
        category{
          name
        }
        slug
      }
    }

这是我的 index.vue

    <template>
      <div>

        <div class="uk-section">
          <div class="uk-container uk-container-large">
            <h1>Strapi blog</h1>

            <Articles :articles="articles"></Articles>

          </div>
        </div>

      </div>
    </template>

    <script>
    import articlesQuery from '~/apollo/queries/article/articles'
    import Articles from '~/components/Articles'

    export default {

      data() {
        return {
          articles: [],
        }
      },
      components: {
        Articles
      },
      apollo: {
        articles: {
          prefetch: true,
          query: articlesQuery,
          variables () {
            return { slug: this.$route.params.slug }
          }
        }
      },
    }
    </script>

和组件 Articles.vue

    <template>
      <div>
        <div class="uk-child-width-1-2" uk-grid>
          <div>
            <!-- <router-link
              v-for="article in leftArticles"
              :to="{ name: 'articles-slug', params: { id: article.id, slug: article.slug } }"
              class="uk-link-reset"
              :key="article.id"
            > -->
            <nuxt-link 
              v-for="article in leftArticles"
              :to="{ name: 'articles-slug', params: { slug: article.slug } }"
              class="uk-link-reset"
              :key="article.slug"
            >

              <div class="uk-card uk-card-muted">
                <div class="uk-card-media-top">
                  <img :src="api_url + article.image.url" alt="" height="100" />
                </div>
                <div class="uk-card-body">
                  <p
                    id="category"
                    v-if="article.category"
                    class="uk-text-uppercase"
                  >
                    {{ article.category.name }}
                  </p>
                  <p id="title" class="uk-text-large">{{ article.title }}</p>
                </div>
              </div>
            <!-- </router-link> -->
            </nuxt-link>
          </div>
          <div>
            <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
              <router-link
                v-for="article in rightArticles"
                :to="{ name: 'articles-slug', params: { id: article.id, slug: article.slug } }"
                class="uk-link-reset"
                :key="article.id"
              >
                <div class="uk-card uk-card-muted">
                  <div class="uk-card-media-top">
                    <img :src="api_url + article.image.url" alt="" height="100" />
                  </div>
                  <div class="uk-card-body">
                    <p
                      id="category"
                      v-if="article.category"
                      class="uk-text-uppercase"
                    >
                      {{ article.category.name }}
                    </p>
                    <p id="title" class="uk-text-large">{{ article.title }}</p>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          api_url: process.env.strapiBaseUri
        };
      },
      props: {
        articles: Array
      },
      computed: {
        leftArticlesCount() {
          return Math.ceil(this.articles.length / 5);
        },
        leftArticles() {
          return this.articles.slice(0, this.leftArticlesCount);
        },
        rightArticles() {
          return this.articles.slice(this.leftArticlesCount, this.articles.length);
        }
      },

    };
    </script>

和 router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import { interopDefault } from './utils'
    import scrollBehavior from './router.scrollBehavior.js'

    const _59e5da44 = () => interopDefault(import('..\\pages\\articles\\index.vue' /* webpackChunkName: "pages_articles_index" */))
    const _5d531cd4 = () => interopDefault(import('..\\pages\\articles\\_slug.vue' /* webpackChunkName: "pages_articles__slug" */))
    const _a97647d2 = () => interopDefault(import('..\\pages\\categories\\_slug.vue' /* webpackChunkName: "pages_categories__slug" */))
    const _53cb59fb = () => interopDefault(import('..\\pages\\index.vue' /* webpackChunkName: "pages_index" */))

    // TODO: remove in Nuxt 3
    const emptyFn = () => {}
    const originalPush = Router.prototype.push
    Router.prototype.push = function push (location, onComplete = emptyFn, onAbort) {
      return originalPush.call(this, location, onComplete, onAbort)
    }

    Vue.use(Router)

    export const routerOptions = {
      mode: 'history',
      base: decodeURI('/'),
      linkActiveClass: 'nuxt-link-active',
      linkExactActiveClass: 'nuxt-link-exact-active',
      scrollBehavior,

      routes: [{
        path: "/articles",
        component: _59e5da44,
        name: "articles"
      }, {
        path: "/articles/:slug",
        component: _5d531cd4,
        name: "articles-slug"
      }, {
        path: "/categories/:slug?",
        component: _a97647d2,
        name: "categories-slug"
      }, {
        path: "/",
        component: _53cb59fb,
        name: "index"
      }],

      fallback: false
    }

    export function createRouter () {
      return new Router(routerOptions)
    }

还有这个 _slug.vue

    <template>
      <div>
        <div
          v-if="article.image"
          id="banner"
          class="uk-height-small uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding"
          :data-src="api_url + article.image.url"
          uk-img
        >
          <h1>{{ article.title }}</h1>
        </div>

        <div class="uk-section">
          <div class="uk-container uk-container-small">
            <div
              v-if="article.content"
              id="editor"
              v-html="$md.render(article.content)"
            ></div>
            <p v-if="article.published_at">
              {{ moment(article.published_at).format("MMM Do YY") }}
            </p>
          </div>
        </div>
      </div>
    </template>

    <script>
    import articleQuery from "~/apollo/queries/article/article";
    var moment = require("moment");

    export default {
      data() {
        return {
          article: {},
          moment: moment,
          api_url: process.env.strapiBaseUri
        };
      },
      apollo: {
        article: {
          // prefetch({ route }){
          //   return{
          //     slug: route.params.slug
          //   }
          // },
          query: articleQuery,
          variables() {
            return { slug: this.$route.params.slug };
          },
        }
      },
    };
    </script>

我是 nuxt.js 的新手，但我已经尝试了一周来寻找解决方案。这个问题是由strapi API引起的吗？

Answer 1

有点晚了，但这可以帮助你：https://github.com/strapi/strapi/issues/4547

默认情况下，Strapi 只允许在 ID 上查询 findOne。 如果要使用另一个参数，则必须将其添加到覆盖的 graphql 模式中，如下所示： 在api/article/config/schema.graphql.js

const { sanitizeEntity } = require('strapi-utils');

module.exports = {
  query: `
    articleBySlug(slug: String): Article
  `,
  resolver: {
    Query: {
      articleBySlug: {
        resolverOf: 'Article.findOne',
        async resolver(_, { slug }) {
          const entity = await strapi.services.article.findOne({ slug });
          return sanitizeEntity(entity, { model: strapi.models.article });
        },
      },
    },
  },
};