json - 组件中未定义的渲染函数或模板:pages/index.vue
问题描述
render function or template not defined in component: pages/index.vue
我不确定这个错误试图告诉我什么,我试图按照堆栈进行操作,但无法明确确定问题所在。
在遵循有关使用 NuxtJS 和 Contentful 创建博客的内容教程时,我遇到了这个错误。我已经验证了 Contentful 是使用 npm install --save contentful 安装的。
索引.vue
<div class="container">
<div class="columns">
<div class="column is-offset-2 is-8">
<h1 class="title is-2">Latest Posts</h1>
<hr>
<h2 class="title is-4" v-for="(post, index) in posts" :key="index">
<nuxt-link :to="{name : 'blogPost',params: { post : post.fields.slug}}">{{ post.fields.title }}</nuxt-link>
</h2>
</div>
</div>
</div>
<script>
import {createClient} from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData ({env}) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
posts: posts.items
}
}).catch()
}
}
</script>
nuxt.config.js
const config = require('./.contentful.json')
module.exports = {
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
CTF_PERSON_ID: config.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
},
/*
** Headers of the page
*/
head: {
title: 'cometthon',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
内容丰富的.js
const contentful = require('contentful')
// use default environment config for convenience
// these will be set via 'env' property in nuxt.config.js
const config = {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}
// export 'createClient' to use it in page components
module.exports = {
createClient () {
return contentful.createClient(config)
}
}
预期:站点运行,从 Contentful 服务器检索内容,并在页面上呈现。实际:站点运行,错误出现在索引页面上
解决方案
尝试将所有代码放入<template>
元素中
推荐阅读
- video - 使用ffmpeg随机裁剪带有时间变量(t)的视频?
- regex - 正则表达式匹配字母数字字符,只允许下划线出现在中间
- django-urls - 实际上,Django 中 urls.py 中 URL 模式的评估顺序是什么?
- rust - 在默认特征实现中使用关联常量
- python - 调用存储在列表中的多个函数
- javascript - 如何使用 Ajax 将 JSON 从服务器端(nodejs)发送到客户端?
- javascript - Javascript 对象中的访问键
- android - 如何在不堆叠行的情况下更改奇数行的背景色?
- java - Java POI FormulaEvaluator 给出了意外的浮点值
- c# - 您可以逗号分隔“Access-Control-Allow-Origin”标头吗?