vue + axios得到数据无法绑定到vue内 详细代码如下

同袍网微博
  • 7
======================
组件内的代码
============================

<script>
export default {
   data() {
         return{
         datas: [],
         }
   },
   created () {
     this.novelGet('http://novel.juhe.im/categories');
     console.log(this.datas);
   },
   methods: {
      // 路由跳转执行

   }
};
</script>


======================
引入了一个base.js novelGet 就是从里面得到的
============================


exports.install = function (Vue, options) {
    Vue.prototype.novelGet = function (url,dataName='data'){
        this.axios.get(url)
        .then((response)=> {
            // console.log(response.data);
            this.datas = response.data;
            console.log(this.datas);
        })
        .catch(function (error) {
            console.log(error);
        });
    };

我想要 axios 获取到的数据赋予 datas 这个属性内。 我新手,不知道你们是怎么将数据应用到组件内(视图)去的,如果有其他方法也可以,谢谢诸位援手!

回复
阅读 1.8k
3 个回答

Vue组件中,data 声明为返回一个初始数据对象的函数,初始数据也就是这里的datas数组,不会被所有的实例共享引用,
所以在 base.js里面没法获取到组件中的datas数组,对应的也没法赋值。
这里的 this.datas = response.data;,只是为全局的Vue对象添加了一个datas属性。
建议直接在组件里面引入axios,请求数组,并赋值给datas.

在 novelGet 中已经得到了数据 需要把数据return出来 不过很难想象你这一步axios封装的用意是为何

楼上说的对,再提供两个思路
一是使用状态管理,把数据存到那里,也在那里取,二是在你的函数里提供一个回调函数,在回调函数里赋值数据

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏