سلام
امروز به مشکل عجیبی برخوردم
من با 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 عوض بشه، کامپوننت خود به خود آپدیت میشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟