Vue js 从 axios 只显示一次 props

Posted 2023-02-16

【中文标题】Vue js 从 axios 只显示一次 props

【英文标题】：Vue js shows the props for just once from axios

【发布时间】：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)吗？

【参考方案1】：

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