Как использовать v-if из глобальной функции

Это мой код компонента vue

<div v-if = "$can('employee-create')" class = "card-tools">
              <router-link to = "/admin/addphonebook" class = "btn btn-success">
                Add New
                <i class = "fa fa-phone"></i>
              </router-link>
            </div>

Это файл resources/assets/js/mixins/Permissions.vue.

export default {
methods: {
    $can(permissionName) {
        let route = window.routes.permission;
        axios.get(route+`/${permissionName}`)
            .then((resounse)=> {
                return true;
            })
            .catch((error)=> {
                return false;
            });
    },
},

};

Это resources/assets/js/app.js для импорта миксина

import Permissions from './mixins/Permissions';

Vue.mixin(Permissions);

Функция $can возвращает значение true, но кнопка «Добавить новый» не отображается

v-если не вернуть истинное значение

Кто-нибудь может мне помочь? заранее спасибо

Вы получаете обещание от axios. И это не определено при рендеринге. Сохраните логическое значение проверки разрешений в data() и защитите свой сервер. :)

Csaba Gergely 03.07.2019 20:01
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
1
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

@Чаба Гергели решил вашу проблему. Когда вы получаете данные с сервера, метод $can возвращает true один раз за секунду или меньше, но после вызова $can стал возвращать false. Вы можете создать переменную с именем success и сохранить результат вызова axios.

Это должно быть что-то вроде этого

<div v-if = "success" class = "card-tools">
              <router-link to = "/admin/addphonebook" class = "btn btn-success">
                Add New
                <i class = "fa fa-phone"></i>
              </router-link>
            </div>

export default {
data(){
 return {
    success:false
  }
},
methods: {
    $can(permissionName) {
        let route = window.routes.permission;
        axios.get(route+`/${permissionName}`)
            .then((resounse)=> {
                this.success = true;
                //return true;

            })
            .catch((error)=> {
                this.success = false;
               //return false;
            });
    },
},

P.S. Bocsi @Csaba Gergely, ha elhappoltam eloled a kerdest :(

Другие вопросы по теме