【问题标题】:How can I get the data from Strapi backend to display on the front end如何从 Strapi 后端获取数据以显示在前端
【发布时间】:2022-01-13 19:12:34
【问题描述】:

我有一个带有 Vue 前端的 Strapi 后端平台。我正在尝试在首页上显示内容,但遇到了问题。

它调用数据没有问题,并在我放入时显示在console.log中。但是,在Vue数据中,数组保持为空,因此根本不会显示数据。我希望它显示的页面上的脚本中是否缺少某些内容?下面是具体的脚本代码。

再一次,try/catch 中的返回实际上显示了数据。这是 Vue 数据中不想填充的返回

<script>
import Vue from "vue";
export default {
  name: "whatsNew",
  
  async beforeRouteEnter(to, from, next) {
    try {
   
      var WhatsNew = await Vue.$whatsNewService.findOne(to.params.id);
  
      return next((vm) => {
        vm.WhatsNew = WhatsNew;
        console.log(WhatsNew.title);
      });
      
    } catch (err) {
      console.log(err);
      next(false);
    }
  },
  data() {
    return {
      whatsNew: [],
    };
  },

};
</script>

【问题讨论】:

    标签: vue.js strapi


    【解决方案1】:

    在这个例子中,除了一个重大失误之外,一切都是正确的……返回时 whatsNew 的大写。 WhatsNew 解决了它

    【讨论】:

    • 您的代码使您面临反应性的潜在问题 - 将数据挂钩中的 whatsNew[] 替换为从 findOne 返回的对象 - 最好将这些文档推送到现有数组中。因此,将 vm.whatsNew = whatsNew 替换为 vm.whatsNew.push(...whatsNew) - 然后您只需将返回数组中的新项目附加到现有数组中,避免因替换原始数组而可能导致的潜在反应性问题。这样做符合 Vue 的响应式系统。
    • @TremendusApps 感谢您的建议。我真的很感激!
    • @TremendusApps 在执行该建议时,但是,我尝试传播不可迭代的实例是无效的。不确定这是否只是缺少一些小东西或可能是什么
    • 那么从 API 调用返回的 whatsNew 不是一个数组 - 在控制台中检查它。
    猜你喜欢
    • 2021-04-01
    • 2020-07-18
    • 2021-10-06
    • 2021-06-10
    • 2018-05-29
    • 1970-01-01
    • 2022-11-23
    • 2019-05-27
    • 2020-07-09
    相关资源
    最近更新 更多