Question

我有一个django rest_framework作为服务器，而vuejs是一个客户端。有一个类似“ /”的索引页面，其中我使用v-for迭代对象数组以显示某些物品的牌。每张卡都有一个指向“ / info”（通过路由器中的/：slug动态更改）的按钮，如下所示：

...
<RouterLink :to="{name: 'contentItemInfo', params: {item: item, slug: item.slug} }">
   <button class="card-button btn fade-in">
      ...
   </button>
</RouterLink>
...

然后，当我们按下按钮时，我们将进入'/：slug'并将项目参数传递给道具，如下所示：

...
<video class="video" type="video/mp4" autoplay loop :src="item.trailer"/>
<h3 class="video-info-h3 px-5 py-1 rounded">{{ item.title }}</h3>
<h5 class="video-info-h5 px-5 py-1 rounded">{{ item.subtitle }}</h5>
<p class="video-info-p px-5 py-1 text-wrap rounded">{{ item.description }}</p>
...

export default {
  name: "ContentItemInfo",
  components: {Footer, Navbar},
  props: [
    'item'
  ],
}

目前可以使用，但是当我重新加载页面时，所有内容消失了，并且所有项目的值都未定义

重新加载后如何使它工作？

Answer 1

通过路由参数传递复杂的对象仅在内存中有效。重新加载页面后，唯一的数据就是URL中的字符串。您必须从后端加载item数据才能重新加载页面。

尝试类似的方法，将item属性设置为可选，并在未设置的情况下加载数据

export default {
  name: "ContentItemInfo",
  components: {Footer, Navbar},
  props: {
    item: {
      type: Object,
      default: null
    },
    slug: String // set from the route param
  }
  data: vm => ({
    video: vm.item // initialise a local copy so you can update it if required
  }),
  async created () {
    if (this.video === null) {
      // just guessing with this bit
      const { data } = await axios.get(`/api/video-for-slug/${encodeURIComponent(this.slug)}`)
      this.video = data
    }
  }
}

和您的模板

<div v-if="video">
  <video
    class="video"
    type="video/mp4"
    autoplay
    loop
    :src="video.trailer"
  />
  <h3 class="video-info-h3 px-5 py-1 rounded">{{ video.title }}</h3>
  <h5 class="video-info-h5 px-5 py-1 rounded">{{ video.subtitle }}</h5>
  <p class="video-info-p px-5 py-1 text-wrap rounded">{{ video.description }}</p>
</div>
<p v-else>Loading...</p>

在上面，我假设您的路线正在传递参数作为道具。如果没有，请参见https://router.vuejs.org/guide/essentials/passing-props.html

VueJS：动态组件在重新加载后会丢失其道具

1 个答案: