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

Posted 2023-02-16

【中文标题】使用 vue.js 路由和 mixin 的问题

【英文标题】：problem with using vue.js routing and mixin

【发布时间】：2020-03-14 16:35:05

【问题描述】：

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>

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

【问题讨论】：

如果您知道存在数组/异步时是否尝试显示图像。呼叫已经 bean 了？通过添加一个 'v-if="images" '

感谢您的关注。

我试过<img v-if="images" :src="'/' + images[1].img_path" />，但结果是一样的。我试过 并且错误消失了。我不知道为什么一开始它是未定义的。

【参考方案1】：

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

将代码更改为

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

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

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

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

【讨论】：

感谢您的回答。但我想知道在渲染组件之前调用beforeRouteEnter()guard，并在渲染之前分配数据。尽管数据分配在异步内部。函数，它在 next() 函数内部，并且在解析导航之前将执行异步代码。因为导航将暂停，直到调用 next() 函数。我怎么理解这个？