Почему мой массив в 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;
            }
        });
    }
});

часть HTML, где я использую vue:

<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 () {