سلام
امروز به مشکل عجیبی برخوردم
من با vuex به api درخواست میزنم و دیتاهارو میگیرم.(تو vue dev tool و network tab دیتا رو میبینم و اروری نمیگیرم)
ولی دیتا ها رندر نمیشه و dom آپدیت نمیشه
این تصویر رو ببینید: وقتی رو سرچ باکس کلیک میشه و دیتا searchBox ترو میشه دام آپدیت میشه و اطلاعات نمایش داده میشه
واقعا نمیدونم مشکل از کجاس؟
vuex:
export default new Vuex.Store({ state: { socials: [], info: {} }, mutations: { SET_SOCIALS(state, val) { state.socials.push(val) }, SET_INFO(state, val) { state.info.title = val.title state.info.number = val.number state.info.about = val.about_me state.info.email = val.mail } }, actions: { setSocials({commit}) { Http.get("/config") .then(response => { let social = response.data.socialmedia; for (const [key, value] of Object.entries(social)) { commit('SET_SOCIALS', `https://${value}`) } }) }, setInfo({commit}) { Http.get("/config") .then(response => { let res = response.data.site.info; commit('SET_INFO', res) }) } }, getters: { getSocials: state => state.socials, getInfo: state => state.info } })
Header.vue:
import {mapGetters} from 'vuex' export default { name: "Header", mixins: [mixins], data() { return { searchBox: false } }, watch: { searchBox(val) { if (val) { this.$nextTick(() => { this.$refs.searchInput.focus(); }); } } }, methods: { closeResult() { this.searchBox = false; } }, computed: { ...mapGetters(['getInfo','getSocials']), } }
header.vue (template):
<ul class="list-unstyled d-flex align-items-center mb-۰ text-white"> <li class="pl-۳"><i class="fas fa-phone"></i> <b class="mr-۱">تلفن</b>: <a :href="`tel:${getInfo.number}`">{{ getInfo.number }}</a></li> <li><i class="fas fa-envelope"></i> <b class="mr-۱">ایمیل</b>: <a :href="`mailto:${getInfo.email}`" class="roboto">{{ getInfo.email }}</a></li> </ul> </div> <div class="d-none d-md-block"> <ul class="list-unstyled d-flex align-items-center mb-۰ text-white" id="social"> <li class="pl-۳"><a :href="getSocials[۱]" target="_blank"><i class="fab fa-telegram-plane"></i></a></li> <li class="pl-۳"><a :href="getSocials[۳]" target="_blank"><i class="fab fa-twitter"></i></a> </li> <li class="pl-۳"><a :href="getSocials[۰]" target="_blank"><i class="fab fa-instagram"></i></a> </li> <li><a :href="getSocials[۲]" target="_blank"><i class="fab fa-linkedin-in"></i></a></li> </ul> </div>
از index های سوشال مطمئن هستم و مشکلی وجود نداره.
فقط یک نکته: همون طور ک گفتم دیتاها نمایش داده نمیشه ولی وقتی دیتا رو (همون سوشال) میزارم تو اتریبیوت href بدون مشکل دیتا لود میشه ولی اگ بخوام با {{}} نمایش بدم چیزی نمایش داده نمیشه و با کلیک بر روی سرچ باکس dom آپدیت میشه.
بعد این اکشن هارو تو متود mounted کامپوننت اصلی App.vue dispatch میکنم:
mounted() { this.$store.dispatch('setSocials'); this.$store.dispatch('setInfo'); }
بعد یک چیز دگ هم فهمیدم ک اگر توی router.js کامپوننت روت اصلی رو به App.vue تغییر بدم دیتا ها بدون مشکل لود میشن ولی دگ خودتون مشکلشو میدونین.
در حال حاضر:
{ path: '/', component: Index },
اگر به App تغییر بدم مشکلی در نمایش وجود نداره ولی خوب دگ نمیشه پیج های دگ رو با این layout َایجاد کنم.
{ path: '/', component: App },
واقعا خیلی عجیبه، تو stackoverflow هم پرسیدم ولی هیچکی نمیدونه
با کامند زیر میتونید به صورت دستی ویو رو آپدیت کنید
vm.$forceUpdate();
اما باید ببینید کجای کد اشتباه کردید که خود به خوب آپدیت نمیشه.. اگر از :key هم استفاده کنید، وقتی که key عوض بشه، کامپوننت خود به خود آپدیت میشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟