是否可以返回已安装的 vuejs 组件？答案

【问题标题】：Is there possible to return vuejs component in mounted?是否可以返回已安装的 vuejs 组件？
【发布时间】：2023-01-15 00:41:57
【问题描述】：

我正在尝试返回已安装但无法成功的 Vuejs 自定义组件。只是 html 推送返回工作正常。

<script>
import DatatabelCell from "./DatatableCell";
export default {
    data() {
        return {
            rows: [],
            columns: [
                { name: "Name", field: "name" },
                { name: "ID", field: "id" },
                { name: "Type", field: "brewery_type" },
                { name: "State", field: "state" },
            ],
        };
    },
    mounted() {
        let filterData = [];
        const columns = this.columns;
        this.tableData.forEach(function (row) {
            const filteredByColumn = [];
            columns.forEach((column) => {
                filteredByColumn.push(<DatatabelCell :value="[row[column.field]]"/>);
                return column;
            });
            filterData.push(filteredByColumn);
        });
    },
};
</script>

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

我将在 computed 属性中创建 filteredData 数组，并使用 v-for 循环使用 html 模板。沿着这些路线的东西。

<script>
import DatatabelCell from "./DatatableCell";
export default {
     data() {
          return {
                rows: [],
                columns: [
                     { name: "Name", field: "name" },
                     { name: "ID", field: "id" },
                     { name: "Type", field: "brewery_type" },
                     { name: "State", field: "state" },
                ],
          };
     },

     computed: {
        filteredData: function () {
            const filteredByColumn = [];

            this.tableData.forEach(row => {
                this.columns.forEach(column => {
                    filteredByColumn.push([row[column.field]]);
                });
            });

            return filteredByColumn;
        }
    }
};
</script>

<template>
<div v-for="(cell, i) in filteredData" :key="i">
    <DatatabelCell :value="cell">
</div>
</template>

【讨论】：