تا ۶۰ درصد تخفیف شگفت انگیز نوروزی! (‌ آخرین فرصت )

اطلاعات بیشتر..

ثانیه

دقیقه

ساعت

روز

ورود عضویت

rasool_sh

2 سال پیش توسط rasool_sh مطرح شد

3 پاسخ

مشکل در کد vue

 <script setup>
import useThreadStore from "@/store/threads.js";
import { computed, onMounted } from "vue";
import PaginateComponent from "@/components/threads/PaginateComponent";
import ThreadCardComponent from "@/components/threads/CardComponent";
 
const threadStore = useThreadStore();
const threads = computed(() => threadStore.allThreads);
 
async function fetchThreads() {
  await threadStore.fetchThreads("/threads");
}
 
onMounted(() => {
  fetchThreads();
});
</script>
<template>
  <div class="container mt-5 py-4">
    <div
      class="flex flex-wrap flex-row justify-center items-center"
      v-if="threads.length"
    >
      <div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
        <ThreadCardComponent :thread="thread" />
      </div>
      <PaginateComponent />
    </div>
  </div>
</template>

کد بالا صفحه ایندکس اصلی منه و با ران شدن پروژه بدون مشکل و ارور لود میشه اما اگه بین روت ها جا به جا شم و برگردم به همین صفحه از thread.length ایراد میگیره و میگه thread یک undefind هستش

 <script setup>
import { defineProps, computed,onMounted } from "vue";
import useAnswersStore from "@/store/answers";
import AnswersCardComponent from "@/components/answers/CardComponent";
 
const props = defineProps(["slug"]);
const answersStore = useAnswersStore();
const answers = computed(() => answersStore.allAnswers);
 
onMounted(() => {
  answersStore.fetchAnswers(`/threads/${props.slug}/answers`);
});
 
const loadNextAnswers = () => {
  answersStore.fetchAnswers(answersStore.$state.next_page);
};
</script>
 
<template>
  <div
    v-for="answer in answers"
    :key="answer.id"
    class="flex flex-col p-4 border-2 rounded-xl my-2"
  >
    <AnswersCardComponent :answer="answer" />
  </div>
  <div class="flex flex-row flex-wrap justify-center my-4">
    <button
      v-if="answersStore.$state.next_page != null"
      @click="loadNextAnswers"
      class="p-2 bg-green-500"
    >
      Show more
    </button>
  </div>
</template>

این هم یک مورد دیگ هستش مثلا وقتی از صفحه ایندکس اصلی وارد اینجا میشم بهم ارور میده و میگه fetchAnswers یه تابع تعریف تشده است اما اگ همین رو رفرش کنم بدون مشکل لود میشه

ثبت پرسش جدید

مهدی نظری

تخصص : توسعه دهنده Front End

@mahdi.nazari 2 سال پیش مطرح شد

سلام رسول جان 🖐
امیدوارم حالت خوب و عالی باشی🙏

خبره که نیستم اما چیزکای بلدیم 😊

بنظرم مشکل توی زمانبندی بازیابی داده هاته درسته و وقتی بین صفحات میخری کامپوننت هات درست اجرا نمیشه
پیشنهاد من اینطوریه که بیشتر اگر از nuxt استفاده کنی و برای چرخه داده هات بری سمت asyncData | async/await کارت اسونتره عملا

از Vue Router Navigation Guards برای میتونی برای پیش پردازش ها برای ورود به مسیر جدید استفاده کنی و این میتونه خوب و کارآمد تر باشه
بعنوان مثال میتونی از beforeRouteEnter یا beforeRouteUpdate استفاده کنی

مثال استفاده

  
export default {
  beforeRouteEnter(to, from, next) {
    fetchThreads().then(() => {
      next();
    });
  },
};

حالا مشکل اساسی ترت رو وقتی که داری دیتا رو دریافت میکنی و احتمال میدی که لود نشه رو با این راه حل اوکی کنی :

استفاده از v-if برای بررسی وجود داده‌ها
در کدهات ، قبل از استفاده از threads.length، با استفاده از v-if بررسی کن که داده‌ها به درستی لود شدن یا خیر. این کار به شما اجازه می‌دهد تا فقط زمانی که داده‌ها به درستی لود شده‌اند، از آن‌ها استفاده کنی

 <template>
  <div class="container mt-5 py-4">
    <div
      class="flex flex-wrap flex-row justify-center items-center"
      v-if="threads && threads.length"
    >
      <!-- ... -->
    </div>
  </div>
</template>

استفاده از Navigation Guards:

 export default {
  beforeRouteEnter(to, from, next) {
    fetchThreads().then(() => {
      next(vm => {
        // داده‌ها با موفقیت لود شده و می‌توانید از آن‌ها استفاده کنید.
      });
    });
  },
};

استفاده از v-slot در <template> بالا
میتونی مطمئن بشی که از v-slot در قالب‌های <template> مختلف استفادمیکنی تا داده‌ها به درستی منتقل میشن

 <script setup>
// ...
</script>
 
<template>
  <div class="container mt-5 py-4">
    <div
      class="flex flex-wrap flex-row justify-center items-center"
    >
      <div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
        <ThreadCardComponent :thread="thread" />
      </div>
      <PaginateComponent />
    </div>
  </div>
</template>

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹

ارسال پاسخ

rasool_sh

@jackjaker344 2 سال پیش مطرح شد

@mahdi.nazari
خیلی ممنون ازت مهدی جان
نوشته هات فک کنم تا حدی مشکلاتمو حل کنه
درباره nuxt هم قصدشو دارم اما فعلا میخام در Vue به تسلط کافی برسم و باهاش چند تا پروژه در حد قابل قبول شخصی که خودم تعریف کردم رو پیاده کنم بعدش وقتم رو صرف آموزش nuxt کنم

ارسال پاسخ

سید مبین موسوی

@seyed _ mobin _ moosavi 2 سال پیش مطرح شد

سلام و درود
fetchThreads(); رو از onMounted() بیرون بیارید

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

مشکل در کد vue

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	<script setup>
	import useThreadStore from "@/store/threads.js";
	import { computed, onMounted } from "vue";
	import PaginateComponent from "@/components/threads/PaginateComponent";
	import ThreadCardComponent from "@/components/threads/CardComponent";

	const threadStore = useThreadStore();
	const threads = computed(() => threadStore.allThreads);

	async function fetchThreads() {
	await threadStore.fetchThreads("/threads");
	}

	onMounted(() => {
	fetchThreads();
	});
	</script>
	<template>
	<div class="container mt-5 py-4">
	<div
	class="flex flex-wrap flex-row justify-center items-center"
	v-if="threads.length"
	>
	<div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
	<ThreadCardComponent :thread="thread" />
	</div>
	<PaginateComponent />
	</div>
	</div>
	</template>

	<script setup>
	import { defineProps, computed,onMounted } from "vue";
	import useAnswersStore from "@/store/answers";
	import AnswersCardComponent from "@/components/answers/CardComponent";

	const props = defineProps(["slug"]);
	const answersStore = useAnswersStore();
	const answers = computed(() => answersStore.allAnswers);

	onMounted(() => {
	answersStore.fetchAnswers(`/threads/${props.slug}/answers`);
	});

	const loadNextAnswers = () => {
	answersStore.fetchAnswers(answersStore.$state.next_page);
	};
	</script>

	<template>
	<div
	v-for="answer in answers"
	:key="answer.id"
	class="flex flex-col p-4 border-2 rounded-xl my-2"
	>
	<AnswersCardComponent :answer="answer" />
	</div>
	<div class="flex flex-row flex-wrap justify-center my-4">
	<button
	v-if="answersStore.$state.next_page != null"
	@click="loadNextAnswers"
	class="p-2 bg-green-500"
	>
	Show more
	</button>
	</div>
	</template>


	export default {
	beforeRouteEnter(to, from, next) {
	fetchThreads().then(() => {
	next();
	});
	},
	};

	<script setup>
	// ...
	</script>

	<template>
	<div class="container mt-5 py-4">
	<div
	class="flex flex-wrap flex-row justify-center items-center"
	>
	<div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
	<ThreadCardComponent :thread="thread" />
	</div>
	<PaginateComponent />
	</div>
	</div>
	</template>