javascript - 当由ajax请求填充时，vue.js中的数据变量不会出现在 View 中

Question

我有下面的代码，“tarefas”变量没有出现在我的 v-for 中，我验证了服务器的响应，一切正常，数据即将到来。当我在输入字段中添加新数据时，它可以正常工作

JS:

var app = new Vue({

el: '#app',

data: {
    titulo: 'Lista de Tarefas',
    tarefas: [],
    tarefa: ''
},

methods: {
    addTarefa: function () {
        console.log(this.tarefa);
        if (this.tarefa !== '') {
            this.tarefas.push({identificador: 0, descricao: this.tarefa, feito: 0});
            this.postTasks();
            //this.tarefa = '';
        }
    },

    removerTarefa: function (tarefa) {
        this.tarefas.splice(this.tarefas.indexOf(tarefa), 1)
    },

    syncTasks: function () {
        jQuery.get('http://localhost:51622/api/tarefa', function (data, status) {
            this.tarefas = data;
            console.log(data);
            console.log(this.tarefas);
        });
    },

    postTasks: function () {
        jQuery.post('http://localhost:51622/api/tarefa', {identificador: 0, descricao: this.tarefa, feito: 0});
    },
},

created: function () {
    console.log("passei no mounted");
    this.syncTasks();
},});

HTML:

<p class="text-primary center">{{ titulo }}</p>
        <div class="col-xs-3">
            <input type="text" placeholder="digite a tarefa" v-model="tarefa" class="form-control" />
        </div>
        <button v-on:click="addTarefa" class="btn btn-default">add tarefa</button>
        <br />

        <br />
        <div class="col-xs-3">
            <ul class="list-group">
                <li v-for="tarefa in tarefas" class="list-group-item">{{ tarefa }} <button class="btn" v-on:click="removerTarefa(tarefa)">X</button></li>
            </ul>
        </div>

    </div>
</div>
<script src="app.js"></script> 

Answer 1

由于您的回调是常规函数，因此您的 this 并未指向 Vue.尝试使用箭头函数。

jQuery.get('http://localhost:51622/api/tarefa', (data, status) => {
    this.tarefas = data;
    console.log(data);
    console.log(this.tarefas)
});

参见How to access the correct this inside a callback?