在 VueJS 和 Laravel 混合中呈现错误

Question

第一次加载页面时出现错误。

我在该组件中有以下代码。

<router-link
    :to="{
        name: 'play',
        params: { token: this.$route.params.token,
                  id: user.id }
        }"
    target="_blank"
    >
        <button class="btn btn-warning fz-btn-play">
             <i class="fas fa-play"></i>
        </button>
</router-link>

首次加载页面时 user.id 出错，因为加载时用户变量为空。错误是 TypeError: Cannot read property 'id' of null

然后我运行创建了()方法：

created() {
   axios.get("/api/getUser").then((response) => {
       this.user = response.data;
   });
},

当页面完全加载时，它工作正常，但错误显示在控制台中如何删除此错误。

Answer 1

在您的 router-link

上应用 v-if

<router-link
    v-if="user" //use user as v-if
    :to="{
        name: 'play',
        params: { token: this.$route.params.token,
                  id: user.id }
        }"
    target="_blank"
    >
        <button class="btn btn-warning fz-btn-play">
             <i class="fas fa-play"></i>
        </button>
</router-link>

这将防止您遇到的错误。

在 VueJS 和 Laravel 混合中呈现错误

Error in rendering in VueJS and Laravel mix

javascript

vue.js

laravel-mix