Javascript 无法在VueJS 2中从created（）到data（）获取数据

我正在从创建的方法内的API获取数据，我希望在页面中使用这些数据

这是我的密码

created(){
    let id = this.$route.params.id
    let videos;
    this.$axios.get(this.$axios.defaults.apiURL + 'v1.0.0/tips/' +id,).then((response) => {
      this.videos = response.data.data;


    }, (error) => {
      toast.$toast.error('Something went wrong! Please try again', {
        position: 'top'
      })
    });
  },
  data(){
    let videos = this.videos;
    return {
      video: {
        sources: [{
          src: videos.video_url,
          type: 'video/mp4'
        }],
        options: {
          autoplay: true,
          volume: 0.6,
          poster: videos.thumbnail
        }
      }

    }
  }

---

我得到一个错误，缩略图和视频url没有定义。这2个值来自API响应。我怎样才能解决这个问题？谢谢

我可以看到您的代码有两个明显的问题（没有看到它的实际应用）：

• created

  是一个，但您的axios请求返回一个承诺。你没有等待承诺，而是立即尝试显示结果，因此你遇到了一个问题——数据还没有到达

• 你使用

  这个

  似乎有点混乱（即

  让视频=这个。视频

  -？唯一的其他“视频”是）

有多种方法可以解决这个问题，具体取决于您在获取数据时想要显示什么以及这是什么类型的组件—如果您想在等待响应请求时显示微调器，或者如果您只想在上一页上显示一些进度条，并且只在加载该进度条后才输入该进度条

组件加载中

在第一种情况下，我建议设置一个变量或使用一个加载程序管理解决方案，如。您的代码可能如下所示：

data（）{
返回{
加载：对，
视频：空，
}
},
计算：{
视频（）{
把这个还给我，好吗{
资料来源：[{
src:this.videos.video\u url，
类型：“视频/mp4”
}],
选项：{
自动播放：对，
体积:0.6,，
发信人：this.videos.缩略图
}
}：null
}
},
方法：{
fetch（）{
设id=this.$route.params.id
this.$axios.get（this.$axios.defaults.apirl+'v1.0.0/tips/'+id，）。然后（（响应）=>{
this.videos=response.data.data；
}，（错误）=>{
toast.$toast.error（'出现问题！请重试'{
位置：'顶部'
})
}).最后（（）=>（this.loading=false））；
},
},
创建（）{
this.fetch（）
}，

我可以看到您的代码存在两个明显的问题（没有看到它的实际作用）：

• created

  是一个，但您的axios请求返回一个承诺。你没有等待承诺，而是立即尝试显示结果，因此你遇到了一个问题——数据还没有到达

• 你使用

  这个

  似乎有点混乱（即

  让视频=这个。视频

  -？唯一的其他“视频”是）

有多种方法可以解决这个问题，具体取决于您在获取数据时想要显示什么以及这是什么类型的组件—如果您想在等待响应请求时显示微调器，或者如果您只想在上一页上显示一些进度条，并且只在加载该进度条后才输入该进度条

组件加载中

在第一种情况下，我建议设置一个变量或使用一个加载程序管理解决方案，如。您的代码可能如下所示：

data（）{
返回{
加载：对，
视频：空，
}
},
计算：{
视频（）{
把这个还给我，好吗{
资料来源：[{
src:this.videos.video\u url，
类型：“视频/mp4”
}],
选项：{
自动播放：对，
体积:0.6,，
发信人：this.videos.缩略图
}
}：null
}
},
方法：{
fetch（）{
设id=this.$route.params.id
this.$axios.get（this.$axios.defaults.apirl+'v1.0.0/tips/'+id，）。然后（（响应）=>{
this.videos=response.data.data；
}，（错误）=>{
toast.$toast.error（'出现问题！请重试'{
位置：'顶部'
})
}).最后（（）=>（this.loading=false））；
},
},
创建（）{
this.fetch（）
}，