Вызов vue-компонента в v-for

Question

У меня следующая конструкция:

 <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>

Массив "рекламодатели" хранит данные с сервера.Данные верны.Но я вижу, что все «рекламодатель-удаление-компонент» и «рекламодатель-редактирование-компонент» имеют первый элемент массива рекламодателей в подпорках компонента.Вот код рекламодателя-компонента редактирования:

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

export default {
    mounted() {

    },
    props: ['advertiserId', 'advertiserName'],
    data: function() {
        return {
            formFields: {
                advertiserName: '',
                advertiserId: this.advertiserId,
            },
            errors: []
        }
    },
    methods: {
        submit: function (e) {
            window.axios.post('/advertiser/edit', this.formFields).then(response => {
                this.formFields.advertiserName = '';

                EventBus.$emit('reloadAdvertisersTable');

                $('#addAdvertiser').modal('hide');
            }).catch(error => {
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors || [];
                }
            });
        }
    }
}

Реквизиты props: ['advertiserId', 'advertiserName'] одинаковы для каждого вызова компонента с моим кодом.Я хочу, чтобы они были динамическими, когда они берут соответствующие элементы из массива, когда цикл проходит через него один за другим.

Что я сделал не так?

ОБНОВЛЕНИЕ: Вот полный код таблицыкомпонент:

<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>

Answer 1

Я думаю, formFields должен быть массив объектов, таких как:

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