Vue js 从 axios 只显示一次 props答案

【问题标题】：Vue js shows the props for just once from axiosVue js 从 axios 只显示一次 props
【发布时间】：2021-09-19 08:42:20
【问题描述】：

我有一个从 api 获取数据的组件，我使用 props 将它传递给另一个组件。问题是当我console.log(data) 第一次显示时，如果我刷新页面或路由到另一个页面，console.log(data) 显示为空，我应该更改代码以便在控制台中显示数据

获取数据的组件（main）

<template>
        <Video :videoSrc="videoSrc" />
</template>

import Video from './Ho'
import axios from 'axios'
export default {
    name: 'VideoView',
    components: {
        Video
    },
    data(){
       return{
         videoSrc: '',
       }
    },
    mounted(){
        this.getVideo()
    },
    methods: {
      async getVideo(){
          const videoID = this.$route.params.video_id
          await axios.get(`/video/api/video/${videoID}/`)
          .then(response => {
               this.videoSrc = response.data.video
          })
      }
    },
}

子组件

<script>
import VideoPlayer from '@/components/video/VideoPlayer.vue'

export default {
  name: 'Ho',
  components: {
    VideoPlayer
  },
  props: ['videoSrc'],
    
  },
  mounted () {
    console.log(this.vidSrc)
  }
}
</script>

【问题讨论】：

不应该是console.log(this.videoSrc)吗？

标签： vue.js vuejs2 axios vue-component

【解决方案1】：

经过一番搜索，我找到了this 的答案。我通过在<Video v-if="videoSrc" :videoSrc="videoSrc" /> 这样的智利组件中添加v-if 解决了这个问题，这解决了我的问题

【讨论】：