Vue conditional button text based on data variable

Question

I have 3 desks in a table having role_id 2, 4 and 6. I have two tables. I want to display a different role name on a button based on the current user's role_id.

I want to display:

the role name having role_id 4 if the current user_role_id = 2
the role name having role_id 6 if the current user_role_id = 4.

user table

registration table

code

<span v-if="user.user_role_id ==results.desk_user_role_id">
    <v-btn small color="primary"  v-on:click="getNextDesk" style="width:400px;">Forward to </v-btn>
    <v-btn small color="primary" v-on:click="getPreviousDesk" style="width:400px;">Revert </v-btn>
</span>

Script code

getNextDesk(currentdeskid) {
  if (currentdeskid === 2) {
    return 'Technical Desk';
  }
  if (currentdeskid === 4) {
    return 'Executive Desk';
  }
  return '';
},
getPreviousDesk(currentdeskid) {
  if (currentdeskid === 6) {
    return 'Technical Desk';
  }
  if (currentdeskid === 4) {
    return 'Registration Desk';
  }
  return '';
},

Actually I have 3 user for now i.e registration, technical and executive. Registration will forward record to technical. So, when registration login, button with forward to technical should be displayed in home page, when technical login, button with forward to executive should be displayed in home page and so on. @Dan — prabina sht
– prabina sht, Commented Apr 17, 2020 at 15:00

Dan · Accepted Answer · 2020-04-17 16:54:44Z

1

This is my best guess about what you're trying to do:

new Vue({
  el: "#app",
  data() {
    return {
      user: { user_role_id: 2 },
      roles: {
        2: { name: 'Registration', next: 4 },
        4: { name: 'Technical', next: 6, previous: 2 },
        6: { name: 'Executive', previous: 4 }
      }
    }
  },
  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;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
  User:
  <select v-model="user.user_role_id">
    <option v-for="(role, id) in roles" :value="id">{{ role.name }}</option>
  </select>
  </div><br />
  
  <button v-show="forwardTo">{{ forwardTo }}</button>
  <button v-show="revertTo">{{ revertTo }}</button>
</div>

edited Apr 17, 2020 at 16:54

answered Apr 17, 2020 at 15:37

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

prabina sht Over a year ago

I will try it. Thank you. @Dan

prabina sht Over a year ago

I got 'name' is assigned a value but never used . 'previous' is assigned a value but never used 'name' is assigned a value but never used 'previous' is assigned a value but never used. @Dan

Dan Over a year ago

Those are just lint warnings, not an actual error... I updated the code anyway.

prabina sht Over a year ago

I need to call v-on:click on same button for vue.js axios post method. Can I call both v-show and v-on:click on same button?

Dan Over a year ago

Yes sure, try it out: <button v-show="forwardTo" @click="myMethod">

|

Collectives™ on Stack Overflow

Vue conditional button text based on data variable

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related