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

【问题标题】：Why my array in vue does't affect page data is updated?为什么我在vue中的数组不影响页面数据更新？
【发布时间】：2019-10-24 21:37:42
【问题描述】：

我正在 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>

【问题讨论】：

更改：
[[question.text]]
到
{{question.text}}
由于 django 的模板语言，我将分隔符更改为 [[]] 并且它适用于虚拟数据，它只是不更新
要对 vue 产生反应，你必须有数据插值。 vuejs.org/v2/guide/syntax.html#Text
这是 django 的问题。它使用相同的样式将数据写入模板，因此我必须通过设置分隔符进行更改：delimiters :['[[', ']]']
控制台有bug吗？

标签： javascript django vue.js

【解决方案1】：

问题出在这里：

created:()=>{

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

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

尝试控制台记录 this 以了解我的意思。

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

created () {

【讨论】：