使用 GraphQL 的 for 循环中的 Vue Uncaught TypeError

Question

当我尝试在我的 Vue 项目中循环遍历 GraphQL 查询时遇到类型错误。

我的脚本是这样的：

<script>
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";

const POST_QUERY = gql`
  query GetPostsEdges {
    posts {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`;

export default {

  setup() {
    const { result } = useQuery(POST_QUERY);

    console.log(result);
    return { result };
  },
};
</script>

我的 for 循环：

<div v-if="result">
    <p v-for="edge in result.posts.edges.node" :key="edge.id"></p>
    <p>{{ edge.title }}</p>
</div>

控制台正确返回结果。但是我从 for 循环中得到了 TypeError。估计是我路径写错了？

错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')

Answer 1

使用

<p v-for="edge in result.posts.edges.node" :key="edge.id">{{ edge.title }}</p>

使用 GraphQL 的 for 循环中的 Vue Uncaught TypeError

Vue Uncaught TypeError in for loop with GraphQL

javascript

for-loop

vue.js

graphql