在 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&nbsp; &nbsp; v-if="user" //use user as v-if&nbsp; &nbsp; :to="{&nbsp; &nbsp; &nbsp; &nbsp; name: 'play',&nbsp; &nbsp; &nbsp; &nbsp; params: { token: this.$route.params.token,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: user.id }&nbsp; &nbsp; &nbsp; &nbsp; }"&nbsp; &nbsp; target="_blank"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-warning fz-btn-play">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<i class="fas fa-play"></i>&nbsp; &nbsp; &nbsp; &nbsp; </button></router-link>这将防止您面临的错误。