Vue variable value not updating after a request

Question

Hi everyone I'm having trouble about variable value.

Inside the request I'm matching each array values if their is a match then update the match variable to true if their is. The problem is that the returned match variable is not updating outside the request after it gets updated inside the request. How am I able to get the updated match value?

Template

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

Nuxt plugin

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.log(match) //returns true since their is a match
    })

    console.log(match) //always returns false
    return match
}

Answer 1

You must use mixins, like this:

{
  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;
    }
  }
}

And you can use this in template like this:

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

Answer 2

The promise get resolved after the method returns so match is changed after the method returns, hence you'll always get false.

You should declare a field on the component instance and then change that var from inside the plugin.

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

and in the plugin

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
}