vue.js - 在 vue-good-table 中显示第二个对象数组

Question

因此，我尝试使用数据库中的两个数组在 vue-good-table 中显示数据库中的数据，但问题是该表在 Preview 字段中克隆了我的第二个数组的第一行。

我会尝试回避与问题无关的代码。

html代码如下：

                   <template>
                    ...
                     <vue-good-table
                        class="shadow"
                        theme="polar-bear"
                        styleClass="vgt-table striped"
                        :columns="columns"
                        :rows="priorities"
                        :line-numbers="true"
                        :pagination-options="{
                            enabled: true,
                            mode: 'pages',
                            position: 'top',
                            perPage: 10,
                            perPageDropdownEnabled: true
                        }"
                        :sort-options="{
                            enabled: true,
                            initialSortBy: {
                                field: 'created_at',
                                type: 'asc'
                            }
                        }"
                        :search-options="{
                            enabled: true,
                            placeholder: 'John Doe'
                        }"
                        compactMode
                    >
                        <template slot="table-row" slot-scope="props">
                            <span
                                v-if="props.column.field == 'manage'"
                                class="float-right"
                            >
                                <router-link
                                    :to="{
                                        name: 'PrioritiesEdit',
                                        params: {
                                            id: props.row.id
                                        }
                                    }"
                                    class="btn btn-success"
                                    >Edit</router-link
                                >
                                <router-link
                                    :to="{
                                        name: 'PrioritiesIndex'
                                    }"
                                    class="btn btn-danger"
                                    @click.native="
                                        deletePriority(props.row.id)
                                    "
                                    >Delete</router-link
                                >
                            </span>
                        </template>
                    </vue-good-table>
                   ...
                   </template>

JS：

data() {
    return {
        form: {
            name: "",
            test: "TEST",
            // color picker:
            bg_color: "#3f51b5",
            text_color: "#ffffff"
        },
        columns: [
            {
                label: "Id",
                field: "id",
                hidden: true
            },
            {
                label: "Name",
                field: "name",
                tdClass: "pt-3 text-capitalize"
            },
            {
                label: "Preview",
                field: this.displayColor,
                tdClass: "pt-3",
                html: true
            },
            {
                label: "Created On",
                field: "created_at",
                type: "date",
                dateInputFormat: "yyyy-MM-dd HH:mm:ss",
                dateOutputFormat: "MMM do yy",
                tdClass: "pt-3 text-left",
                thClass: "text-left"
            },
            {
                label: "Manage",
                field: "manage",
                thClass: "text-right"
            }
        ],
        priorities: [],
 };
},
mounted() {
    this.getPriorities();
},
methods: {
    getPriorities() {
        axios
            .get("/tickets-system/public/api/priorities")
            .then(res => {
                this.priorities = res.data.data;
            })
            .catch(error => {
                console.log(console.error());
            });
    },
    storePriority() {
        axios
            .post("/tickets-system/public/api/priorities", {
                name: this.form.name,
                bg_color: this.form.bg_color,
                text_color: this.form.text_color
            })
            .then(res => {
                this.showMessage = true;
                this.message = res.data;
                this.getPriorities();
                this.$router
                    .push({ name: "PrioritiesIndex" })
                    .catch(() => {});
            });
    },
    displayColor() {
        var element = document.createElement("span");
        element.setAttribute("class", "badge badge-pill");
        Object.assign(element.style, {
            backgroundColor: this.priorities[0].bg_color,
            color: this.priorities[0].text_color
        });
        element.innerHTML = this.priorities[0].name;
        return element.outerHTML;
    }
}

所以我搜索了解决问题的方法，我发现的是替换

field: this.displayColor,

和

field: row => this.displayColor(row),

但问题仍然存在

编辑：

所以事实证明，我找到的解决方案确实是问题的答案：

事实上，“行”是一个保存对象值的变量，所以我所要做的就是将我的方法修改为：

displayColor(row) {
        var intRow = parseInt(row);
        var element = document.createElement("span");
        element.setAttribute("class", "badge badge-pill");
        Object.assign(element.style, {
            backgroundColor: row.bg_color,
            color: row.text_color
        });
        element.innerHTML = row.name;
        return element.outerHTML;
    },