请求后Vue变量值不更新答案

【问题标题】：Vue variable value not updating after a request请求后Vue变量值不更新
【发布时间】：2019-08-06 06:08:43
【问题描述】：

大家好，我在变量值方面遇到了麻烦。

在请求中，如果每个数组值匹配，我将匹配它们，如果匹配，则将 match 变量更新为 true。问题是返回的 match 变量在请求内部更新后没有在请求外部更新。如何获取更新后的 match 值？

模板

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

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

【问题讨论】：

标签： javascript html vue.js vuejs2 frontend

【解决方案1】：

你必须使用 mixins，像这样：

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

【讨论】：

【解决方案2】：

在方法返回后承诺得到解决，因此match 在方法返回后被更改，因此您总是会得到错误。

您应该在组件实例上声明一个字段，然后从插件内部更改该 var。

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

【讨论】：