问Vue从子组件获取数据

EN

import Permissions from '../components/User/PermissionsList'

created() {
        Permissions.fetchData()
    },

data() {
        return {
            selectedPermissions: Permissions.data,
        }
}

<template>
<div>
    <b-card title="Permissions">
        {{selectedPermission}}
        <div>
            
      <!-- Example scoped slot for select state illustrative purposes -->
      <template #cell(selectedPermission)="{ rowSelected }">
                <template v-if="rowSelected">
                <i class="feather icon-disc primary" />
                </template>

                <template v-else>
                    <i class="feather icon-circle" />
                </template>
                </template>

                <template #cell(flag)="data">
                    <b-avatar :src="data.item.flag" />
                </template>

                <template #cell(status)="data">
                    <b-badge :variant="status[1][data.value]">
                        {{ status[0][data.value] }}
                    </b-badge>
                </template>

            </b-table>
        </div>
    </b-card>
</div>
</template>

<script>
import {
    BRow,
    BCol,
    BTable,
    BButton,
    BCard,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import Api from "@/store/Api";


export default {
    components: {
        BTable,
        BRow,
        BCol,
        BCard,
        BButton,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            selectMode: 'multi',
            availablePermissions: [],
            selectedPermission: [],
            permissionsFields: [{
                key: 'id',
                label: 'id',
                thClass: 'd-none',
                tdClass: 'd-none'
        }, {key: 'subject', label:'subject', thClass: 'd-none' }, {key: 'action', label:'action', thClass: 'd-none' }],
        }
    },

    mounted() {
        return new Promise((resolve, reject) => {
            Api().get("/permissions/list").then(response => {
                    this.availablePermissions = response.data.data;
                })
                .catch(error => {
                    console.log('Something bad happeneds')
                });
            resolve(true)
        })

    },

    methods: {

    onRowSelected(items) {
      this.selectedPermission = items
    },
    selectAllRows() {
      this.$refs.selectableTable.selectAllRows()
    },
    clearSelected() {
      this.$refs.selectableTable.clearSelected()
    },

    },
}
</script>