Unable to call v-show and @click on same button with vue.js

问题

I'm trying to display text on button based on data variable and call a function for vue.js axios method. I'm able to show text on button based on data variable but unable to call axios post method .I'm getting below error. When I click the button, url "http://localhost:8085/#/applicationtab/3" changes to 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);
                         });
                      },

回答1:

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

Error is ocurring because of this part I think. this.roles[next] I can't find roles property on your properties(data and computed)

Is this a prop from parent component? You need to check if the roles property or props and its child property next exist.

回答2:

this.user is an array or object? If it is an array containing an single object then, you must try this.user[0].user_role_id, or if it is an object so there may be a user id which is not present as a key in the roles object. For that you can use this in your computed property.

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

来源：https://stackoverflow.com/questions/61283659/unable-to-call-v-show-and-click-on-same-button-with-vue-js