Значение переменной Vue не обновляется после запроса

Привет всем, у меня проблемы со значением переменной.

Внутри запроса я сопоставляю значения каждого массива, если они совпадают, а затем обновляю переменную соответствовать до true, если они совпадают. Проблема в том, что возвращаемая переменная соответствовать не обновляется вне запроса после того, как она обновляется внутри запроса. Как я могу получить обновленное значение соответствовать?

Шаблон

<template>
   <div>{{$acl(['post.edit'])}}</div> <!-- always display false -->
</template>

Плагин Nuxt

let match = false
let moduleName = ''
let actionName = ''

Vue.prototype.$acl = ( access ) => {

    let bindAccess = access

    storeRequest.then( done => {
        _.each( bindAccess, ( value, index ) => {
            moduleName = value.split('.')[0]
            actionName = value.split('.')[1]

            /**
             * check if user access modules match with bindAccess module
             */
            if ( aclConfig[moduleName] != undefined ) {
                _.each( aclConfig[moduleName], ( actions, index ) => {
                    if (actions.action_name === actionName) {
                        match = true
                        return false
                    }
                })
            }
        })

        console.info(match) //returns true since their is a match
    })

    console.info(match) //always returns false
    return match
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
554
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Обещание получить разрешение после, которое возвращает метод, поэтому match изменяется после возврата метода, поэтому вы всегда получите false.

Вы должны объявить поле в экземпляре компонента, а затем изменить эту переменную внутри плагина.

<template>
 <div>{{$acl(['post.edit']), isAMatch}}</div>
</template>

и в плагине

Vue.prototype.$acl = ( access ) => {

 let bindAccess = access

 storeRequest.then( done => {
    _.each( bindAccess, ( value, index ) => {
        moduleName = value.split('.')[0]
        actionName = value.split('.')[1]

        /**
         * check if user access modules match with bindAccess module
         */
        if ( aclConfig[moduleName] != undefined ) {
            _.each( aclConfig[moduleName], ( actions, index ) => {
                if (actions.action_name === actionName) {
                    this.isAMatch = true
                    return false
                }
            })
        }
    })
 })

 // no need to return here
 // return match
}

Вы должны использовать миксины, например:

{
  data: () => {
    return { 
       aclConfig
    }
  },
  created() {
    this.aclConfig = this.$store.getAclConfig(); // or maybe using Promise
  },
  methods: {
    checkAccess(roles) {
       let match = false;
       _.each(roles, (role) => {
         const splited = value.split('.');
         const moduleName = splited[0];
         const actionName = splited[1];
         if (this.aclConfig[moduleName]) {
            _.each(this.aclConfig[moduleName], (actions) => {
              if (actions.action_name === actionName) {
                match = true;
                return false;
              }
           });
        }
      });

      return match;
    }
  }
}

И вы можете использовать это в шаблоне следующим образом:

<template>
 <div>{{ checkAccess(['post.edit']) }}</div>
</template>

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