Ответы пользователя по тегу Vue.js
  • Как обратиться изменить переменную из функции-аякса?

    Nemozar
    @Nemozar
    Php developer
    И лучше используйте .finally для axios. Иначе придётся дважды писать разблокировку кнопки.

    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Ответ написан
    Комментировать
  • Как хостануть приложение на Vue.js, чтобы запросы обрабатывались на стороне сервера?

    Nemozar
    @Nemozar
    Php developer
    Не получится так сделать. Vue будет работать в браузере пользователя. Ему нужен доступ к api.
    Ответ написан
    Комментировать
  • Permission на клиенте. Как реализуют профи?

    Nemozar
    @Nemozar
    Php developer
    Я не профессионал, но решение для себя такое сделал.

    Фронтенд хранит все формы, кнопки и тп. отображение интерфейса производится через проверку прав доступа.

    Сервер на laravel, после авторизации возвращает меню + rbac пользователя. Интерфейс отрисовывается в зависимости от разрешений пользователя (permissions). При изменении списка разрешений, например администратором, отправляется обновлённый список ролей пользователю через websocket. Перестраивается интерфейс.

    И на сервере всегда проверяю разрешено ли пользователю выполнять данное действие.
    Ответ написан
    2 комментария
  • Как лучше реализовать аутентификация в Vue js 2?

    Nemozar
    @Nemozar
    Php developer
    Используй jwt очень удобно. https://github.com/websanova/vue-auth
    Автортзация на роуты вешается и есть механизм rbac. Есть примеры решения для laravel.
    Ответ написан
    Комментировать
  • Есть какая-нибудь приблуда на Vue для таблиц?

    Nemozar
    @Nemozar
    Php developer
    Я использую vuetify, но фильтров вроде там нет. Поддерживается и загрузка всех данных и асинхронная пагинация
    Ответ написан
    Комментировать
  • Как передавать данные между двумя компонентами в Vue?

    Nemozar
    @Nemozar Автор вопроса
    Php developer
    Если кому интересно, реализовал данную задачу. Весь исполняемый код и шаблон пришлось перенести в компонент Page.vue

    Вот листинг кода:
    Pages.vue
    <template>
        <div style="width: 100%; height: 100%">
            <slot></slot>
        </div>
    </template>
    
    <style>
        .flexcard {
            display: flex;
            flex-direction: column;
        }
    </style>
    
    <script>
        export default {
            data: () => ({
                pages : []
            }),
            mounted () {
                this.initPages()
            },
            methods: {
                initPages() {
                    this.$children.forEach((child) => {
                        if (child.$options.name == 'Page'){
                            this.pages.push(child)
                        }
                    })
                },
            }
        }
    </script>


    Page.vue
    <template>
        <v-card width="100%" class="flexcard" v-if="name==activePage" style="height: 100%">
            <v-card-title primary-title style="padding-bottom: 0; padding-top: 0;">
                <slot name="breadcrumbs">
                    <v-breadcrumbs divider="/" class="">
                        <v-breadcrumbs-item
                            v-for="item in breadcrumbs"
                            :key="item.text"
                            :disabled="item.disabled"
                            @click.native="activePage=item.page"
                            class="pa-0"
                        >
                            {{ item.text }}
                        </v-breadcrumbs-item>
                    </v-breadcrumbs>
                </slot>
                <v-spacer></v-spacer>
                <slot name="toolbar"></slot>
            </v-card-title>
            <v-card-text class="grow">
                <slot></slot>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <slot name="actions"></slot>
            </v-card-actions>
        </v-card>
    </template>
    
    <script>
        export default {
            data: () => ({
    
            }),
            computed:{
                name(){
                    return this.$attrs.name
                },
                activePage : {
                    get: function () {
                        return this.$store.state.activePage
                    },
                    set: function (newValue) {
                        this.$store.dispatch('setActivePage', newValue)
                    }
                },
                breadcrumbs(){
                    if (this.activePage) {
                        console.log(this.activePage)
                        let breadcr = this.getBreadcrumb(this.activePage).reverse()
                        return breadcr
                    }else{
                        return []
                    }
                },
            },
            methods:{
                getBreadcrumb(pageName) {
                    let items = []
                    let page = this.getPageByName(pageName)
                    if (page) {
                        items.push({
                            text: page.$attrs.title,
                            page: page.$attrs.name
                        })
                        if (page.$attrs.parent) {
                            let parentItem = this.getBreadcrumb(page.$attrs.parent)
                            items = items.concat(parentItem)
                        }
                    }
                    return items
                },
                getPageByName(name){
                    if (this.$parent.pages && this.$parent.pages.length > 0){
                        let page = this.$parent.pages.find((p) => {
                            return p.$attrs.name == name
                        })
                        return page
                    }
                    return null
                },
            },
        }
    </script>


    В любом файле используем конструкцию
    <template>
        <pages style="height : 100%">
            <vue-element-loading :active="loading" spinner="bar-fade-scale"/>
            <page name="index" title='Список проектов'>
                <template slot="toolbar">
                    <v-btn color="primary" small dark class="mb-2" @click.native="newProject">Новый проект</v-btn>
                </template>
                <v-data-table
                    :headers="headers"
                    :items="projects"
                    hide-actions
                    class="elevation-1"
                >
                    <template slot="items" slot-scope="props" :disabled="true">
                        <td>{{ props.item.name }}</td>
                        <td class="justify-center layout px-0">
                            <v-btn flat icon small  @click="editItem(props.item)">
                                <v-icon
                                    small
    
                                >
                                    edit
                                </v-icon>
                            </v-btn>
    
                            <v-btn flat icon small color="error"
                                   @click="deleteItem(props.item)"
                                   :loading="props.item.loading"
                            >
                                <v-icon small>
                                    delete
                                </v-icon>
                            </v-btn>
                        </td>
                    </template>
                </v-data-table>
            </page>
            <page parent="index" name="edit" title='Редактирование'>
                <v-form v-model="valid">
                    <v-layout wrap>
                        <v-flex xs12>
                            <v-text-field name="name" :error-messages="errors.collect('name')" :rules="nameRules" required v-model="editedItem.name" label="Название"></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                            <v-spacer></v-spacer>
                        </v-flex>
                    </v-layout>
                </v-form>
                <template slot="actions">
                    <v-btn small @click.native="close">Отмена</v-btn>
                    <v-btn
                        small
                        :disabled="!valid"
                        :loading="waitSave"
                        @click.native="save"
                    >
                        Сохранить
                    </v-btn>
                </template>
            </page>
        </pages>
    </template>


    Можно осуществить хлебные крошки любого уровня за счет цепочки parent ссылок в компоненте page
    Ответ написан
    Комментировать