使用 vue.js 路由和混合的问题

Question

Vue developers. Now I'm trying vuebnb tutorial and have a problem with routing and mixins. I tried to assign data before entering the router using beforeRouteEnter guard, but it seems like my template is rendered before data assign. Following is the code I tried.

ListingPage.vue

<template>
  <div>
    <img :src="'/' + images[1].img_path" />
  </div>
</template>
<script>
import { populateAmenitiesAndPrices } from "../js/helpers";
import routeMixin from '../js/route-mixin';

export default {
  mixins: [ routeMixin ],
  data() {
    return {
      title: null,
      about: null,
      address: null,
      amenities: [],
      prices: [],
      images:[],
    }
  },
  methods: {
    assignData({ listing, images }) {
      console.log('inside_component_before_assign');
      this.images = [...images];
      Object.assign(this.$data, populateAmenitiesAndPrices(listing));
      console.log('inside_component_after_assign');
    }
  },
  components: {
  }
};
</script>

route-mixin.js

import axios from 'axios';

function getData(to) {
    return new Promise((resolve) => {
        let serverData = JSON.parse(window.vuebnb_data);
        if (!serverData.path || to.path !== serverData.path) {
            axios.get(`/api${to.path}`).then(({ data }) => {
                resolve(data);
            });
        } else {
            resolve(serverData);
        }
    });
}
export default {
    beforeRouteEnter: (to, from, next) => {
        console.log('before_next');
        getData(to).then((data) => {
            next(component => {
                component.assignData(data);
            });
        });
        console.log('after_next');
    }
};

Here data is a object and it is like {listing: {...}, images: Array(5), path: "/listing/1} . Data fetch from the server is checked. But when I try to render ListingPage.vue, error is logged in console like this: *

 [Vue warn]: Error in render: "TypeError: Cannot read property 'img_path' of undefined"

 found in
 ---> <ListingPage> at resources/assets/components/ListingPage.vue
       <App> at resources/assets/components/App.vue
         <Root>

Regardless of the error, the page is displayed successfully. Please help me to get rid of this error:

Answer 1

From the reply on your comment I conclude your problem is solved by adding a v-if to your html tag?

Changing your code to

 <img v-if="images[1]" :src="'/' + images[1].img_path" />

should work, as the async. request is probably not resolved by the time, the page is compiled by vue. For that have a look at the vue component lifecycle .

As the data attributes are reactive, your component will be visible and the value within will be updated couple ms later than it is compiled.

I'd be glad if somebody could suggest another approach as do not if this is the best practice myself.