vue.JSデータテーブルのデータをajaxでAPIレストにフェッチ

Question

Vue.JS開発で新しく追加されました。私はこれをPHPのSymfony APIで使用してデータを取得しようとしています。 Vuetify要素のデータテーブルが追加されました。 API内のDatableは分離して実行されますが、マウントされた関数（および作成された関数）のvueでAjaxによって先にフェッチされたデータをデータテーブルに表示しません。

new Vue({ 
    el: '#app', 
    data() { 
     return { 
      headers: [ 
       { 
        text: 'Dessert (100g serving)', 
        align: 'left', 
        sortable: false, 
        value: 'name' 
       }, 
       { text: 'Calories', value: 'calories' }, 
       { text: 'Fat (g)', value: 'fat' }, 
       { text: 'Carbs (g)', value: 'carbs' }, 
       { text: 'Protein (g)', value: 'protein' }, 
       { text: 'Sodium (mg)', value: 'sodium' }, 
       { text: 'Calcium (%)', value: 'calcium' }, 
       { text: 'Iron (%)', value: 'iron' } 
      ], 
      Items: [ 

      ] 
     } 
    }, 
    mounted: function() { 
     console.log('egerg'); 
     alert('gregee'); 
     let self = this; 
     $.ajax({ 
      url: 'http://xxx.xxx/api/operation/1', 
      method: 'GET', 
      success: function (data) { 
       alert('fzefzef'); 
       // self.Items = data; 
       self.Items = [{ 
        value: false, 
        name: 'Lollipop', 
        calories: 392, 
        fat: 0.2, 
        carbs: 98, 
        protein: 0, 
        sodium: 38, 
        calcium: '0%', 
        iron: '2%' 
       }]; 
      }, 
      error: function (error) { 
       alert(JSON.stringify(error)); 
      } 
     }); 
    } 
}) 

Ajax関数は良好なデータを返しますが、データテーブルにデータを取り込むことはできません。 私は手動でデータを設定しようとしましたが、結果は同じです。

どのように私のvueにデータ（ajaxかどうか）を入力できますか？

Answer 1

"let"という単語を使用しているため、ES2015を使用していると仮定しています。 項目に（JS大会）

をアイテムの名前を変更しようとしてからちょうど項目をコピーして、アレイにプッシュ：あなたがやっていること

new Vue({ 
    el: '#app', 
    data() { 
     return { 
     headers: [ 
      { 
       text: 'Dessert (100g serving)', 
       align: 'left', 
       sortable: false, 
       value: 'name' 
      }, 
      { text: 'Calories', value: 'calories' }, 
      { text: 'Fat (g)', value: 'fat' }, 
      { text: 'Carbs (g)', value: 'carbs' }, 
      { text: 'Protein (g)', value: 'protein' }, 
      { text: 'Sodium (mg)', value: 'sodium' }, 
      { text: 'Calcium (%)', value: 'calcium' }, 
      { text: 'Iron (%)', value: 'iron' } 
     ], 
     Items: [ 

     ] 
    } 
}, 
mounted: function() { 
    this.getData(); 
}, 
,methods:{ 
    getData(){ 
     let self = this; 
     $.ajax({ 
      url: 'http://xxx.xxx/api/operation/1', 
      method: 'GET', 
      success: function (data) { 
       self.loadSuccess(data) 
      }, 
      error: function (error) { 
       self.loadError(error) 
      } 
     }); 
    }, 
    loadSuccess(data){ 
     var all= data.map(obj =>{ 
      let clone ={...obj}; 
      return clone; 
     }); 
     self.items = all; 
    }, 
    loadError(error){ 
    alert(JSON.stringify(error)); 
    } 
} 
})