將數據傳遞給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

我必須在done函數裏面的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') 
    }); 
}