VueJS: dynamic component loses it`s props after reloading

Question

I have a django rest_framework as a server and vuejs for a client side. There is an index page like \'/\' where i`m using v-for to iterate an array of objects to show some item\

Answer 1

Passing complex objects by route param only works in-memory. Once you reload the page, the only data you have is strings from the URL. You'll have to load the item data from your backend for fresh page loads.

Try something like this, making the item prop optional and loading the data if it's not set

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
    }
  }
}

and your template

  
Loading...

In the above, I assumed that your routes are passing params as props. If not, see https://router.vuejs.org/guide/essentials/passing-props.html