vue.js - 在 v-for 中调用一个 vue 组件

问题描述

我有以下结构：

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

标签： vue.jsvuejs2

vue.js - 在 v-for 中调用一个 vue 组件

问题描述

解决方案

推荐阅读