Vue.js 将vue组件调用到v-for中

我有以下结构：

 <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Наименование</th>
            <th scope="col">API ключ</th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="adv in advertisers">
            <th scope="row">{{ adv.id }}</th>
            <td>{{ adv.name }}</td>
            <td>{{ adv.api_key }}</td>
            <td>
                <advertiser-delete-component :advertiser-id="adv.id"></advertiser-delete-component>
                <advertiser-edit-component :advertiser-id="adv.id" :advertiser-name="adv.name"></advertiser-edit-component>
            </td>
        </tr>
        </tbody>
    </table>

我认为formFields应该是如下对象的数组：

formFields: [{
    advertiserName: '',
    advertiserId: this.advertiserId,
}],

---

formFields对于这种情况并不重要。道具：['advertiserId'，'advertiserName']，在每个组件调用中保持相同的值。这是来自广告商数组第一项的值。请显示已填充数据的已创建的钩子方法好吗？好的，我将更新我的问题并放入表组件的所有代码。很好，这是有意义的。请在getAdvertisersTable:函数的方法中console.logthis.advertisers。。。我只是想了解你的反应，只是你数据的一个形状，它不应该是真实的。。。我只需要一个模式。试着输入：输入，看它是否有效

<template>
    <div>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Наименование</th>
                <th scope="col">API ключ</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="adv in advertisers">
                <th scope="row">{{ adv.id }}</th>
                <td>{{ adv.name }}</td>
                <td>{{ adv.api_key }}</td>
                <td>
                    <advertiser-delete-component :advertiser-id="adv.id"></advertiser-delete-component>
                    <advertiser-edit-component :advertiser-id="adv.id"
                                               :advertiser-name="adv.name"></advertiser-edit-component>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import {EventBus} from '../../app.js';

    export default {
        mounted() {
            this.getAdvertisersTable();
            EventBus.$on('reloadAdvertisersTable', this.getAdvertisersTable)
        },
        props: ['totalCountOfAdvertisers'],
        data: function () {
            return {
                advertisers: [],
            }
        },
        methods: {
            getAdvertisersTable: function () {
                window.axios.get('/advertisers/all')
                    .then(r => {
                        this.advertisers = r.data.data;
                    })
                    .catch(e => {
                        console.log(e.response.data.errors);
                    })
            }
        }
    }
</script>

formFields: [{
    advertiserName: '',
    advertiserId: this.advertiserId,
}],