愛可信不能設置數據

這裏是我的數據：愛可信不能設置數據

data: function(){ 
    return { 
     contas: [{id: 3, 
      nome: "Conta de telefone", 
      pago: false, 
      valor: 55.99, 
      vencimento: "22/08/2016"}] //debug test value 
    }; 
},

這是我的GET請求：

beforeMount() { 
    axios.get('http://127.0.0.1/api/bills') 
     .then(function (response) { 
      console.log("before: " + this.contas); 
      this.contas = response.data; 
      console.log("after: " + this.contas); 
     }); 
},

的問題是我無法從axios.get()中訪問this.contas。我試過Vue.set(this, 'contas', response.data);和window.listaPagarComponent.contas = response.data;沒有成功。

我的控制檯顯示：

before: undefined 
after: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

但只有Vue公司Devtools顯示：

contas: Array[1] 
    0: Object 
    id: 3 
    nome: "Conta de telefone" 
    pago: false 
    valor: 55.99 
    vencimento: "22/08/2016"

這裏是我的full code。

來源

2016-12-06 Guilherme Pressutto

嘗試使用'（）創建'掛鉤，而不是'beforeMount（）'。如果你已經在contas數組中定義了一些數據，那麼我認爲你應該做array.push。 –

好的，你可以在數據模型中創建新的數組，並設置響應數據嗎？然後結帳，項目是否存儲在數組中。不幸的是，我不使用Axios，我寧願使用Vue資源。 –

@Belmin沒有什麼變化......它只是一個調試測試值。我不想要這個價值。問題是我不能使用'this.contas'來引用組件的數據'contas'。沒有功能起作用。我認爲axios是一個「對象」，所以當我使用'this'時，它指的是axios。 –

在選項功能，如data和created，VUE結合this爲我們的視圖模型實例，所以我們可以使用this.contas，但在裏面then功能，this不綁定。

所以你需要保存視圖模型像（created意味着該組件的數據結構組裝，這就足夠了這裏，mounted將延遲操作更多）：

created() { 
    var self = this; 
    axios.get('http://127.0.0.1/api/bills') 
     .then(function (response) { 
       self.contas = response.data; 
       }); 
}

或者你可以使用箭頭功能ES6標準，如果你只着眼於支持現代瀏覽器（或使用像巴貝爾一transpiler），如：

created() { 
    axios.get('http://127.0.0.1/api/bills') 
     .then((response) => { 
       this.contas = response.data; 
       }); 
}

this裏面的箭頭函數是根據詞法上下文綁定的，也就是說上面代碼片段中的this與created中的this相同，這就是我們想要的。

來源

2016-12-07 02:21:23

謝謝！這解決了我的問題！ –

Hooray！這也解決了我的問題......謝謝。不管我多少次學習和理解「這個」，它總會給我造成問題。 –

是的，我想我需要發表另一個問題，因爲現在的問題是不同的。但爲了能夠訪問this.contas我剛剛用mounted: function() {}替換了beforeMount() {}。

來源

2016-12-06 15:32:09

爲了能夠訪問this.contas內axios.get（）你需要綁定「這種」保持變量的使用範圍的：

mounted() { 
    axios.get('http://127.0.0.1/api/bills') 
    .then(function (response) { 
     console.log("before: " + this.contas); 
     this.contas = response.data; 
     console.log("after: " + this.contas); 
    }.bind(this)); 
}

來源

2017-01-14 19:47:01

愛可信不能設置數據

回答

相關問題