使用graphQL的Nuxt链接失败(apollo);未捕获的TypeError

Question

我的graphQL查询似乎有问题，因为模板呈现但nuxt-link失败。它只是显示catrule.ruleid文本，但不是链接格式。

模板：

<li v-for="catrule in cat_rulesetCollection">
<nuxt-link :to="`/cat-rule/` + catrule.ruleid">{{ catrule.ruleid }}</nuxt-link>
</li>

阿波罗：

import gql from 'graphql-tag'
export default {
apollo: {
cat_rulesetCollection: gql` {
cat_rulesetCollection(populate:1) {
ruleid
}
}`
}
}

错误：

Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at VueComponent.observe (nuxt-link.client.js?4e55:62)

Answer 1

我不知道双引号内的backticks是如何工作的，但我会做这样的事情：

<nuxt-link :to=`/cat-rule/${catrule.ruleid}`>{{ catrule.ruleid }}</nuxt-link>

或

<nuxt-link :to="`/cat-rule/` + {{ catrule.ruleid }} ">{{ catrule.ruleid }}</nuxt-link>