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>

数组“广告商”保留来自服务器的数据。数据正确。但是我看到所有“ advertiser-delete-component”和“ advertiser-edit-component”在组件属性中都具有广告商数组的第一项。这是广告客户编辑组件的代码：

<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,
}],

在v-for中调用vue组件

1 个答案: