在我的計算屬性加載之前,VUEJS/X資料模板加載
P粉356361722
P粉356361722 2024-03-29 17:39:55
0
1
425

首先,我很抱歉我的英文不好,我正在使用翻譯器。

我是 VUE 和 VUE X 的初學者,肯定有很大的錯誤。

我在使用 VUE 時遇到問題,目前我正在嘗試根據其 ID 顯示出版物。

這是我的數據:

data(){
    return {
        list: [this.$store.dispatch('allPublications')],
        id:'',
        feed: '',
    }
},

這是我的商店操作:

publicationId:({commit}, messages) => {
  instance.get('/publications/' + messages.id)
  .then(function(response){
    commit('setMessage', response.data.publication)
    console.log(response)
    this.feed = response.data.publication.data
  })
  .catch(function(error){
    console.log(error)
  })
},

這是我的計算結果:

computed: {
    ...mapState({
        user: 'profileUser',
        publication: 'publicationFeed',
        message: 'publicationInfos'
        }),

        message(){
            return this.$store.state.message;
        },
},

這是我的狀態:

setMessage: function(state, message){
  state.message = message
},

這是我的模板:

<template>
           <div class="card-body" @click="publicationId(message.id)">
            <span class="badge bg-secondary">{{ message.User.username }}</span>
            <div class="dropdown-divider"></div>
            <div class="card-text d-flex justify-content-between align-items-md-center">
                <p class="card-text d-flex flex-start">{{ message.message }}</p>
            </div>
            <span class="message__date">{{ message.createdAt.split('T')[0]}}</span>
        </div>
        <img class="card-img-top" alt="..." :src="message.image">

一些螢幕截圖可以為您提供更多幫助:

VUE 谷歌瀏覽器工具

重新載入頁面之前,一切正常

重新載入頁面後,一切都出錯了

只要我不重新加載頁面,一切都會正常工作,一旦重新加載頁面,我就會收到錯誤,我的計算值消失,並且我無法從我的計算中獲取數據。

查了很多資料都沒有解決這個問題,感謝您的幫忙!

P粉356361722
P粉356361722

全部回覆(1)
P粉497463473

看來我已經解決了這個問題:

data() {
    return {
        componentLoaded: false,
        list: [this.$store.dispatch('allPublications')],
        id: '',
        feed: '',
    }
},

在安裝中:

mounted() {
    this.componentLoaded = true;
    this.id = this.$route.params.id;
    this.$store.dispatch('publicationId', { id: this.$route.params.id })
},

在計算中:

computed: {
    message() {
        if (!this.componentLoaded) {
            return null
        } else {
            return this.$store.state.message;
        }
    },
},

我在模板中加入了一個 v-if

這對我有用,希望對有需要的人有幫助。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板