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

Posted 2021-03-28

解决

我有一个组件从后端加载服务列表，并希望在表中列出它们。它正在从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文件。从底部删除一个后，它工作。感谢大家。

答案

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

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

另一答案

我不知道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]);
}

我没有检查代码，但我认为你明白了;