Propsで子コンポーネントに値を渡しているのですが、API通信で取得したデータを渡してあげたいです。
しかし、初期値で子コンポーネントが描写されてしまっているので、途中で親の値が変わっても子コンポーネントの値は変わらないです。
この問題点をどう解決するべきか教えていただきたいです。
videoURLが該当する部分です。
vue.js
1<template lang="pug"> 2 .receipt-top 3 //- Notification( :name="name" :videoUrl="videoUrl") 4 Video( :videoUrl="videoUrl" :videoType="this.$route.query.Type") 5</template> 6 7<script lang="ts"> 8import Vue from "vue"; 9import RoundRectButton from "@/components/RoundRectButton.vue"; 10import Notification from "./components/Notification.vue"; 11import Video from "./components/Video.vue"; 12import VideoEntity from "@/entities/video"; 13import Talent from "@/entities/talent"; 14 15export type DataType = { 16 videoUrl: string; 17 name: string; 18 type: string | any; 19}; 20export default Vue.extend({ 21 components: { 22 RoundRectButton, 23 Notification, 24 Video, 25 }, 26 data(): DataType { 27 return { 28 videoUrl: "", 29 name: "", 30 type: this.$route.query.Type, 31 }; 32 }, 33 created() { 34 this.createVideoUrl(); 35 this.getTalent(); 36 }, 37 methods: { 38 async createVideoUrl() { 39 const talId: any = this.$route.query.TalentID; 40 const reqId: any = this.$route.query.RequestID; 41 const type: any = this.$route.query.Type; 42 const video: VideoEntity = { 43 talentID: talId, 44 requestID: reqId, 45 type: type, 46 }; 47 try { 48 this.videoUrl = await this.$repositories.VideoRepository.createVideoUrl(video); 49 } catch { 50 this.$router.replace("/"); 51 } 52 }, 53 async getTalent() { 54 const id: any = this.$route.query.talentID; 55 const talent: Talent = await this.$repositories.TalentRepository.getTalentByID(id); 56 this.name = talent.talentName; 57 }, 58 }, 59}); 60</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。