首先,我很抱歉我的英文不好,我正在使用翻譯器。
我是 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 谷歌瀏覽器工具
重新載入頁面之前,一切正常
重新載入頁面後,一切都出錯了
只要我不重新加載頁面,一切都會正常工作,一旦重新加載頁面,我就會收到錯誤,我的計算值消失,並且我無法從我的計算中獲取數據。
查了很多資料都沒有解決這個問題,感謝您的幫忙!
看來我已經解決了這個問題:
在安裝中:
在計算中:
我在模板中加入了一個 v-if
這對我有用,希望對有需要的人有幫助。