用户投稿在vue实例方法当中可以透过this访问data里面的数据，但获取网路数据后，vue实例里面的this不在是同样的那个因此无法访问data中的数据，所以我们应该要将this保存起来
<body> <div id="app"> <input type="button" value="点我获取" @click="getJoke"> <p> {{ joke }}</p> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ joke:"想听笑话吗" }, methods:{ getJoke(){ axios.get('https://autumnfish.cn/api/joke') .then(function(response){ console.log(response) },function(err){ console.log(err) }) } } }) </script>我们可以先看到点击Vue应用中的"点我获取"按钮时，这个应用将使用Axios发送一个HTTP GET请求到"https://autumnfish.cn/api/joke" 这个地址(由黑马程序员提供)，以获取一条笑话。
但如果要访问笑话的数据是放在data里面的，所以我们可以改成response.data
接着我们要将笑话呈现出来
但要注意的是，若我们是这样写，this会改变我们就不能就无法拿到数据
methods: { getJoke: function() { console.log(this.joke); // 此处的 this 是 Vue 实例 axios.get("https://autumnfish.cn/api/joke").then(function(response) { console.log(response.data); console.log(this.joke); // 此处的 this 已经不是 Vue 实例了 }, function(err) { }); }}在Vue的方法中，this会自动绑定到Vue实例本身，使我们可以在方法中访问Vue实例的数据和方法。但在JavaScript的函数中，this的上下文可能会因为函数的调用方式而改变。所以在axios.get的then函数内部使用了一个匿名函数。而这个匿名函数中的this已经不再指向Vue实例，而是指向了匿名函数本身。因此，this.joke不再指向Vue实例的joke数据，而是未定义。
所以我们应该修改为
methods: { getJoke: function() { var that = this; // 将外层的 this 保存在变量中 console.log(this.joke); axios.get("https://autumnfish.cn/api/joke").then(function(response) { console.log(response.data); that.joke = response.data; //储存joke console.log(that.joke); // 使用保存的 that 来访问 Vue 实例的数据 }, function(err) { }); }}所以我们要存起来var that = this，通过这种方式，就可以在访问到Vue实例的数据。
另一个方法是使用箭头函数，因为箭头函数的this与外层上下文相同，不会随着函数的调用而改变：
methods: { getJoke: function() { console.log(this.joke); axios.get("https://autumnfish.cn/api/joke").then(response => { console.log(response.data); console.log(this.joke); // 此处的 this 仍然指向 Vue 实例this.joke=response.data;//更新笑话 }, err => { }); }
这样就可以获取笑话了。
参考资料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=26&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967
微信扫一扫打赏
支付宝扫一扫打赏
