web-dev-qa-db-ja.com

Axiosはデータを設定できません

私のデータは次のとおりです。

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"

これが私の 完全なコード です。

vue.jsaxios
35
Guilherme Pressutto

Axios.get（）内でthis.contasにアクセスできるようにするには、「this」をバインドして、変数の使用範囲を制限する必要があります。

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));
}
15
Fred Sousa

ええ、私は別の質問を投稿する必要があると思います。問題は現在異なっているからです。しかし、this.contasにアクセスできるようにするには、beforeMount () {}をmounted: function () {}に置き換えたところです。

0
Guilherme Pressutto