Question

我有这个asyncData函数，可在其中获取类似于以下内容的嵌套数据

"data": {
    "content": [
        {
            "description": "descript for 56",
            "image": {
                "url": "https://www.stefanmaescher.com/wp-content/uploads/2014/11/Large-rectangle-336x280.jpg"
            }
            "title": "content 56"
        }
    ],
    "id": 56,
}

该页面在首次加载时可以正常工作，但是如果我使用f5重新加载或浏览器重新加载vue.js 仅获得父数据的更改（即id，即子对象的内容被完全忽略，就好像它不存在一样）。

我在nuxt之上使用了一个名为vue-mc的库，该库允许我在vue js中使用模型类（但是我相信这是问题所在，因为如果我不将原始数据类型转换为模型页面，效果很好）

<template>
  <div class="app">
    <div class="wrapper">
    <Header />
    <b-jumbotron>
      {{ notification.id }}
      {{ notification.contents }}
  </b-jumbotron>
</div>
<Footer class="mt-auto" />
</div>
</template>

<script>
  import Header from "~/components/Header.vue"
  import Footer from "~/components/Footer.vue"
  import { Notification } from "~/models/notification/Notification"

  export default {
    components: {
      Header,
      Footer
    }, 
    data() {
      return { notification: new Notification() }
    },
    async asyncData({ app, params }) {
      const data = await app.$NotificationApi.getNotification(params.id)
      return { notification: data }
   }
 }
</script>

nuxt js asyncData不适用于页面重新加载上的嵌套数据

0 个答案: