在vuejs 中使用axios不能獲取屬性data的解決方法

 

 vuejs和axios使用鈎子mounted不能獲取屬性data的解決方法

 

data(){ return { followed : false, } },

axios請求數據：

 // mounted 方法為鈎子，在Vue實例化后自動調用
 mounted() { axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(function(response){ // console.log(response.data);
           this.followed = response.data.followed; }) },

出錯問題：
在then 這個里邊的賦值方法this.followed = response.data.followed會出現報錯，什么原因呢？在Google上查了下，原來是在 then的內部不能使用Vue的實例化的this, 因為在內部 this 沒有被綁定。
可以看下 Stackoverflow 的解釋：

 

In option functions like data and created, vue binds this to the view-model instance for us,
so we can use this.followed, but in the function inside then, this is not bound.

 

解決方法：

 created() { var self = this; axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(function(response){ // console.log(response.data);
          self.followed = response.data.followed; }) },

 

或者我們可以使用 ES6 的 箭頭函數arrow function，箭頭方法可以和父方法共享變量 ：

 

 created() { axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then((response) => { this.followed = response.data.followed; }) },

完整代碼：

<script> export default { // 為父組件傳遞到子組件的屬性值，子組件使用props方法接收
    props:['question', 'user'], // mounted 方法為鈎子，在Vue實例化后自動調用
 mounted() {  axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(function(response){ // console.log(response.data);
           this.followed = response.data.followed; }) }, data(){ return { followed : false, } }, computed:{ text(){ return this.followed ? '已關注' : '關注該問題'; } }, methods:{ // 關注動作
 follow(){ axios.post('/api/question/follow', { 'question':this.question, 'user':this.user }).then(function(response){ this.followed = response.data.followed; }) } } } </script>

參考文章：
Stackoverflow：Axios can't set data