使用 vue.js 路由和 mixin 的问题

Question

Vue 开发人员。 现在我正在尝试 vuebnb 教程，但遇到了路由和 mixins 的问题。 我尝试在使用 beforeRouteEnter 保护进入路由器之前分配数据，但似乎我的模板是在数据分配之前呈现的。 以下是我试过的代码。

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');
    }
};

这里 data 是一个对象，它就像 {listing: {...}, images: Array(5), path: "/listing/1} . 检查从服务器获取的数据。 但是当我尝试渲染 ListingPage.vue 时，控制台中会记录如下错误： *

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

不管错误如何，页面都显示成功。请帮我摆脱这个错误：

Answer 1

从对您评论的回复中，我得出结论，通过在您的 html 标记中添加 v-if 可以解决您的问题？

将代码更改为

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

应该工作，作为异步。 request 到时候可能还没有解决，页面是 vue 编译的。为此，请查看 vue 组件 lifecycle。

由于数据属性是反应性的，因此您的组件将是可见的，并且其中的值将在编译后几毫秒更新。

如果有人可以建议另一种方法，如果这是我自己的最佳做法，我会很高兴。