javascript - 为什么我在vue中的数组不影响页面数据更新？

Question

我正在 vue 中编写简单的应用程序，向服务器请求数据。数据被接收并写入两个对象数组，但它们没有更新到我的 html。

我必须更改分隔符，因为我使用 django。我检查数据(如果它真的存在)并尝试一些虚拟数据来尝试 vue 应用程序是否工作并且每个想法似乎都很好。

Vue 应用程序:

var app1 = new Vue({
    delimiters :['[[', ']]'],
    el: "#app-1",
    data:{
        questions : [{text:"test", 'pk':1}],
        possible : [{text:"test", 'pk':1}]
    },
    created:()=>{
        let  pk = $("#pk").val()
        SetupCSRF();
        $.ajax({
            type:"post",
            url:"/tester/test/questions",
            data:JSON.stringify({pk:pk}),
            contentType:"application/json",
            dataType:"json",
            success:(data)=>{
                console.log(data);
                this.questions = data.questions;
                this.possible = data.possible;
            }
        });
    }
});

我使用vue的html部分:

<div id="app-1">
    <div class="testquestions">
        <div v-for="question in questions">
            <div>[[question.text]]</div>
            <button class="remove" v-bind:value="question.pk">Remove</button>
        </div>
    </div>
    <div>
        <div class="questions" v-for="p in possible">
            <p>[[p.text]]</p>
            <button class="add" v-bind:value="p.pk">Add</button>
        </div>
    </div>
    <button v-on:click="test">click</button>
</div>

Answer 1

问题出在这里:

created:()=>{

通过使用箭头函数，您将丢失 this 上下文。它不会引用 Vue 实例，而是将这些属性添加到不相关的对象:

this.questions = data.questions;
this.possible = data.possible;

尝试控制台记录this来看看我的意思。

您只需将其更改为普通函数，如下所示:

created () {