使用 ajax 在 API rest 上获取 vue.JS 数据表的数据答案

【问题标题】：fetch data for vue.JS datatable on API rest with ajax使用 ajax 在 API rest 上获取 vue.JS 数据表的数据
【发布时间】：2018-02-19 19:02:14
【问题描述】：

我是 Vue.JS 开发的新手。我尝试将它与 PHP Symfony API 一起使用来获取数据。我添加了一个 Vuetify 元素数据表。 API 中的数据可单独运行，但我没有在我的数据表中显示先前由 ajax 在挂载函数（和创建函数）vue 中获取的数据。

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 与否）？

【问题讨论】：

你能提供更多细节你做了什么，实际上是什么问题？我以类似的方式使用 Vue.js，并且确实使用 AJAX 加载附加信息，以及一些请求状态跟踪和事件处理来更新组件状态。注意：您可能会陷入组件数据中包含数组的（所谓的）“警告”：vuejs.org/v2/guide/list.html#Caveats - 响应式数据无法动态跟踪此类结构中的更改（刚刚在您的代码中看到了） self.Items.

标签： vuejs2

【解决方案1】：

我假设您使用的是 ES2015，因为您使用的是“让”这个词。尝试将 Items 重命名为 items（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));
   }
 }
})

【讨论】：

奥奇！！问题只是命名约定。大写是禁止的，不要使用这个。但如果没有大写，相同的代码可以完美运行。