Nuxt JS Apollo数据仅在页面刷新后可用

老丝 · 04月03日

我正在Nuxt内部使用Apollo获取一些数据。不知何故,导航到该页面时出现错误

Cannot read property 'image' of undefined

当我刷新页面时,一切正常。

我发现有人遇到类似问题,但似乎没有解决方案对我有用:/

现在这是我的模板文件:

/products/_slug.vue

<template>
  <section class="container">
    <div class="top">
      <img :src="product.image.url"/>
      <h1>{{ product.name }}</h1>
    </div>
  </section>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    product: {
      query: gql`
        query Product($slug: String!) {
          product(filter: { slug: { eq: $slug } }) {
            slug
            name
            image {
              url
            }
          }
        }
      `,
      prefetch({ route }) {
        return {
          slug: route.params.slug
        }
      },
      variables() {
        return {
          slug: this.$route.params.slug
        }
      }
    }
  }
}
</script>

基本上,除非刷新页面,否则$ apolloData保持为空。任何想法将不胜感激

编辑 走近了一步(我认为)。以前,第一次导航到页面时,所有内容(image.url和名称)都将是不确定的。

我补充说:

data() {
    return {
      product: []
    };
  }

在导出的顶部,现在至少总是定义名称,因此,如果我删除图像,一切都会按预期进行。只是image.url一直未定义。

我注意到的一件事(不确定相关性)是仅使用会发生此问题,如果我使用正常的标签会起作用,但当然会消除vue的魔力。

EDIT-2 所以以某种方式,如果我将Nuxt降级到1.0.0版,一切正常

回答(1)
时间
凯Sam
1 · 2020-04-03 10:53:46

我认为这只是页面加载时间的问题。

如果有多个产品,则应该在产品上进行迭代,或者v-if="product != null"在产品容器上具有,则仅在从GraphQL提取数据后才会呈现。

这样,仅在真正获取HTML对象时才使用它,并避免读取未定义的属性。

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序