將數據傳遞到Vue.js中的數組

Question

我敢肯定這很簡單，但是我無法使它正常工作。 我已經閱讀了文檔和其他資料，但我只是不明白。 我只想將用ajax檢索到的數據傳遞給一個空數組。 我已經確保數據確實確實來自服務器，但是它似乎沒有分配給UserArticles，並且不會更新DOM。 我想念什么。 這是我的代碼：

零件：

Vue.component('article-selection', {
    props: ['articles'],
    template: '<div> <p>{{articles.title}}</p> </div>'
})

VUE：

var Article = {};
var UserArticles = [];

var vm = new Vue({
el: '#createNewArticle',
data: {
    Article: Article,
    UserArticles: UserArticles
},
computed: {
    isNewArticle: function () {
        return this.Article.ArticleIdentification.Id.length < 5
    }
},
created: function(){
    this.getUserArticles();
},
methods: {
    setUserId: function (id) {
        //code
    },
    createNewArticle: function (msg) {
        //code},
    getUserArticles: function () {
        $.ajax({
            method: "GET",
            url: "/api/Article/GetUserArticles"
        }).done(function (rData, status, jq) {
            UserArticles = rData;
            toastr.success('', 'Retrieved User Articles');

        }).fail(function (rData, status, error) {
            var result = $.parseJSON(rData.responseText);
            toastr.warning(result.messages, 'Retrieve User Articles')
        });
    }
}
})

HTML：

<div class="row" id="createNewArticle" >
<div class="col-sm-12">

    <!--Create Initial article-->
    <div class="row" v-if="true">
        <div class="col-sm-12 text-center">
            <div>Passed: {{Article.UserId}}</div>
            <div class="form" style="display: inline-block;" id="newArticleForm">
                <div class="form-group">
                    <label for="ArticleName">Article Title</label>
                    <input type="text" class="form-control" id="ArticleTitle"
                           name="ArticleTitle" v-model="Article.ArticleIdentification.Title" /><br />

                    <p>{{Article.ArticleIdentification.Title}}</p>
                    <button class="btn btn-sm" v-on:click="createNewArticle('hey hey')">
                        Create New Article
                    </button>
                </div>
            </div>

        </div>
        <div class="col-sm-12">

            <!--COMPONENT HERE--!>
            <article-selection v-for="(artId, index) in UserArticles"
                               v-bind:key="artId.id"
                               v-bind:index="index"
                               v-bind:articles="artId"></article-selection>
        </div>
    </div>

</div>

Answer 1

嘗試像這樣編寫方法

 $.ajax({
        method: "GET",
        url: "/api/Article/GetUserArticles"
        success: function (data) {
            UserArticles  = data;
        },
        error: function (error) {
            alert(JSON.stringify(error));
        }
    })
}

Answer 2

我必須在完成功能內的ajax代碼中使用箭頭功能，並添加this關鍵字。 注意區別：

getUserArticles: function () {
    $.ajax({
        method: "GET",
        url: "/api/Article/GetUserArticles"
    }).done((rData, status, jq) => {
        this.UserArticles = rData;
        toastr.success('', 'Retrieved User Articles');

    }).fail(function (rData, status, error) {
        var result = $.parseJSON(rData.responseText);
        toastr.warning(result.messages, 'Retrieve User Articles')
    });
}