Ошибка при рендеринге в 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

, затем я запускаю метод create ():

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>

Это предотвратит возникшую ошибку.