无法使用 vue.js 调用 v-show 和 @click 同一按钮

我正在尝试根据数据变量在按钮上显示文本并调用 vue.js axios 方法的函数。我能够根据数据变量在按钮上显示文本，但无法调用 axios post 方法。我收到以下错误。当我点击按钮时，url“http://localhost:8085/#/applicationtab/3 http://localhost:8085/#/applicationtab/3” 更改为http://localhost:8085/?#/applicationtab/3 http://localhost:8085/?#/applicationtab/3.

<span v-if="user.user_role_id ==results.desk_user_role_id">
                                         <button small color="primary"  style="width:400px;" @click="forward" v-show="forwardTo">{{ forwardTo }}</button><br>
                                         <button small color="primary"  style="width:400px;" @click="revert" v-show="revertTo">{{ revertTo }}</button>
                                      </span>

    data() {
               return {
      user: [],
     roles: {
           2: { name: 'Registration', next: 4, previous: 0 },
           4: { name: 'Technical', next: 6, previous: 2 },
           6: { name: 'Executive', next: 0, previous: 4 },
         },
   };
   },
    mounted() {
                        const currentuserUrl = 'api/profile';
                        VueAxios.get(currentuserUrl, {
                             headers: {
                                 'X-Requested-With': 'XMLHttpRequest',
                                 Authorization: `Bearer ${localStorage.getItem('token')}`,
                             },
                         }, {
                             timeout: 100000,
                         })
                         .then((response) => {
                           // debugger;
                                 this.user = response.data;
                               //   console.log(response.data);

                                 // debugger;
                         });
        computed: {
           forwardTo() {
             const { next } = this.roles[this.user.user_role_id];
             return next ? `Forward to ${this.roles[next].name}` : false;
           },
           revertTo() {
             const { previous } = this.roles[this.user.user_role_id];
             return previous ? `Revert to ${this.roles[previous].name}` : false;
           },
         },
       methods: {
         forward() {
                 this.$refs.form.forward();
                       const url = `/api/registration/${this.$route.params.id}/forward`;
                       VueAxios.post(url, this.forward_message, {
                               headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                   Authorization: `Bearer ${window.localStorage.getItem('token')}`,
                               },
                           }, {
                               timeout: 10000,
                           })
                           .then((response) => {
                               if (response.status === 200) {
                               //    this.successmessage = 'Forwarded successfully.';
                                this.message = 'Forwarded successfully.';
                               }
                           })
                           .catch((error) => {
                             console.log(error);
                         });
                      },
                        revert() {
                       const url = `/api/registration/${this.$route.params.id}/revert`;
                       VueAxios.post(url, this.forward_message, {
                               headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                   Authorization: `Bearer ${window.localStorage.getItem('token')}`,
                               },
                           }, {
                               timeout: 10000,
                           })
                           .then((response) => {
                               if (response.status === 200) {
                               //    this.successmessage = 'Forwarded successfully.';
                                this.message = 'Reverted successfully.';
                               }
                           })
                           .catch((error) => {
                             console.log(error);
                         });
                      },

 computed: {
       forwardTo() {
         const { next } = this.roles[this.user.user_role_id];
         return next ? `Forward to ${this.roles[next].name}` : false;
       },

我认为由于这部分而发生了错误。这个.角色[下一个] 我在您的属性（数据和计算）上找不到角色属性

这是来自父组件的道具吗？ 接下来您需要检查 Roles 属性或 props 及其子属性是否存在。