1

我需要一个可重用的 Nuxt 组件，它从Sanity.io获取一些数据。我正在使用@nuxtjs/sanity包，所以查询如下所示：

import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "article"][0].title`

export default {
  async fetch() {
    const result = await this.$sanity.fetch(query)
    this.title = result
  },
  data: () => ({ title: '' }),
}

但是，如果我尝试按照建议（${placeholder}）在查询模板文字中使用变量作为占位符，它将不起作用。

这不起作用：

const placeholder = 'article'
const query = groq`*[_type == ${placeholder}][0].title`

编辑

在 Sanity 模块的Github 存储库示例中，他们使用此代码来实现我正在寻找的内容：

import Vue from 'vue'
import { groq } from '@nuxtjs/sanity'

const query = groq`*[_type == "movie" && slug.current == $slug][0] {
  title,
  releaseDate,
  castMembers[] {
    characterName
  },
  overview
}`

interface QueryResult {
  title: string
  releaseDate: string
  castMembers: Array<{ characterName: string }>
  overview: any[]
}

export default Vue.extend({
  components: {
    LocalSanityImage: SanityImage,
  },
  async fetch () {
    const movieDetails = await this.$sanity.another.fetch<QueryResult>(query, {
      slug: this.$route.params.slug,
    })
    this.details = movieDetails
  },
  data: () => ({ details: null as null | QueryResult }),
})

遗憾的是这些解决方案没有出现在文档中。

他们为什么要导入 Vue？这些参数是否适用于文档中的代码示例？

4

1 回答 1

0

感谢Daniel Roe的帮助。对于要作为变量读取的占位符，它必须被引用，如下所示：

const placeholder = 'article'
const query = groq`*[_type == "${placeholder}"][0].title`
于 2020-09-19T20:38:29.503 回答