Question

已解决

我有一个组件可以从后端加载服务列表，并希望在表中列出它们。它正在从API加载数据，但未在表中显示。我在Laravel上使用它。

VueJS组件ResourceTable.vue：

<template>
  <div>
    <a class="button" v-on:click.native.prevent="services">Load</a>
    <b-table :data="items" :columns="columns"></b-table>
    {{items}}
    <br>
    {{ done }}
  </div>
</template>


<script>
    export default {
        name: 'resource-table',
        props: ['resource'],
        data() {
            return {
                loading: false,
                done: 'loading',
                items: [],
                columns: [{
                    field: 'name',
                    label: 'Name'
                }],
                host: 'http://services.local/api/v1'
            }
        },
        methods: {
            /*
             * Load async data
             */
            services: function() {
                console.log('loading data');
            this.loading = false;
            // const vm = this;
            axios.get(`${this.host}/${this.resource}`)
                .then(({ data }) => {
                this.items = data.data;
                console.log(this.items)
                this.loading = false;
                this.done = 'loaded';
                this.$toast.open('Data load complete')
                })
            }
        },
        mounted() {
            this.services()
        }
    }
</script>

<style scoped>

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<resource-table resource="workspaces"></resource-table>

API正在工作，我正在从服务器获取数据，但表中没有更新。

如果我在items数组中预定义了一些值，它将列出该数据，但不会显示API中的数据。

已解决

我包含了两次JS文件。从底部移除一个后，它起作用了。谢谢大家。

Answer 1

我不了解Laravel，但我认为这是有问题的部分：

this.items = data.data;

您需要使用循环将数据放入项。否则，项目中的数据将不会反应。

像这样（运行for循环，您还使用forEach进行迭代）：

this.items.splice(0); // just in case you want to replace already existing data

for (let i = 0, l = data.data.length; i < l; i++) {
  this.items.push(data.data[i]);
}

我还没有检查代码，但是我想你明白了；

Answer 2

尝试使用created（）生命周期挂钩而不是mount（）

https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Vue.js状态未更新：已解决

2 个答案: