Question

我的头撞了这一天大约一天左右，现在需要你去救援。

我正在构建一个rest-api驱动的vue.js站点。我正在使用vuex-rest-api从wordpress的副本中获取数据，然后将其输出到页面上。

问题是我的数据在加载时没有显示，在渲染时抛出错误错误：＆＃34; TypeError：无法读取属性＆＃39; title＆＃39;未定义＆＃34;，。一旦我开始对代码进行更改，webpack会在保存内容显示时进行热重新加载。看起来页面加载时数据不可用。我无法掌握目前的知识如何解决这个问题。

我为getPosts（）尝试了不同的生命周期钩子（例如beforeCreated（）），但它没有帮助。

这是代码。

posts.js 从＆＃34; vuex-rest-api＆＃34;

导入Vapi

preg_match_all("/<p class=\"psku\">SOMETHINGREGEX</span></p>/", $string, $info);

Home.vue

const pages = new Vapi({
  baseURL: "http://localhost:8888/wp-json/wp/v2",
  state: {
    pages: []
  }
})
.get({
  action: "getPosts",
  property: "pages",
  path: "/pages"
})
.getStore()


export default pages

Answer 1

您错过了带帖子的mapState类型，但没有帖子属性。 Home.vue文件的L18-19 对于String和内容/标题为<template> <div class="container header header--home"> <div v-for="item in pages" :key="item.id"> <h2 v-html="item.title"></h2> <p v-html="item.content"></p> </div> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { created() { this.getPosts() }, computed: { ...mapState({ pages: state => state.pages }) }, methods: { ...mapActions([ "getPosts", ]) } } </script>的页面之间存在类型的错误解释。 Home.vue文件的L4-5

Home.vue

Answer 2

上面提出的Ru建议的好东西。

稍微调整一下代码：

computed: mapState({
    pages: state => state.posts.pages,
}),

不知何故，我需要使用vuex-rest-api来提及帖子。

另外，为了从wordpress rest-api获取正确的数据，我不得不稍微调整一下循环：

<div class="col-sm" v-for="item in pages" :key="item.id">
    <h2 v-html="item.title.rendered"></h2>
    <p v-html="item.content.rendered"></p>
</div>

谢谢！

Vuex和axios，远程内容未在初始页面加载时显示

2 个答案: