Ошибка при использовании слота шаблона и области слота на VueJS - PullRequest
Новая
       51

Ошибка при использовании слота шаблона и области слота на VueJS

0 голосов
/ 14 января 2020

Ошибка при использовании слота и области видимости на VueJS для помещения в столбец таблицы.

Шаблон выглядит следующим образом: 

        <b-table hover striped :items="users" :fields="fields">
            <template slot="actions" slot-scope="data">
                <b-button variant="warning" @click="loadUser(data.item)" class="mr-2">
                    <i class="fa fa-pencil"></i>
                </b-button>
                <b-button variant="danger" @click="loadUser(data.item, 'remove')">
                    <i class="fa fa-trash"></i>
                </b-button>
            </template>
        </b-table>

В конце концов, я возможность получить пользователей на БД. И иметь успех, чтобы показать это на столе. Но кнопки на слоте не могут. По идее ставится две кнопки:

  1. Кнопка обновления
  2. Кнопка удаления

И каждая кнопка управляет одной функцией. 

<script>
import { baseApiUrl, showError } from '@/global'
import axios from 'axios'

export default {
    name: 'UserAdmin',
    data: function(){
        return {
            mode: 'save',
            user: {},
            users: [],
            fields: [
                { key: 'id', label: 'Código', sortable: true},
                { key: 'name', label: 'Nome', sortable: true},
                { key: 'email', label: 'E-mail', sortable: true},
                { key: 'adminMaster', label: 'Administrador', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                {key: 'adminEnterprise', label: 'Chefe de Empreendimento', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'manager', label: 'Gerente', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'customer', label: 'Cliente', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'actions', label: 'Ações'}
            ],
        }
    },
    methods: {
        loadUsers() {
            const url = `${baseApiUrl}/users`
            axios.get(url).then(res => {
                this.users = res.data
            })
        },
        reset() {
            this.mode = 'save'
            this.user = {}
            this.loadUsers()
        },
        save() {
            const method = this.user.id ? 'put' : 'post'
            const id = this.user.id ? `/${this.user.id}` : ''
            axios[method](`${baseApiUrl}/users${id}`, this.user)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        remove() {
            const id = this.user.id
            axios.delete(`${baseApiUrl}/users/${id}`)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        loadUser(user, mode = 'save') {
            this.mode = mode
            this.user = { ...user }
        }
    },
    mounted() {
        this.loadUsers()
    }

}
</script>

1 Ответ

0 голосов
/ 14 января 2020

Хорошо, похоже, вы используете официальный выпуск BV 2.0., BV готовится к Vue 3, который пересматривает систему слотов для компонентов.

Таким образом, BV имеет переименовав пользовательские слоты, вам нужно использовать cell({key}) примерно так: 


            <template slot="cell(actions)" slot-scope="data">
...