在 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() 方法：created() {   axios.get("/api/getUser").then((response) => {       this.user = response.data;   });},当页面完全加载时，它工作正常，但控制台中显示错误如何删除此错误。

Answer 1

申请v-if您的router-link

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

这将防止您面临的错误。