Customize button text in Vue using data variable conditions

Question

Customize button text in Vue using data variable conditions

There are 3 desks in a table with role IDs 2, 4, and 6. In this scenario, two tables are involved. The goal is to dynamically display a specific role name on a button based on the current user's role ID.

The desired displays are:

If the current user's role ID is 2, then show the role name associated with role ID 4
If the current user's role ID is 4, then display the role name linked to role ID 6

User Table https://i.stack.imgur.com/XLLyA.png

Registration Table https://i.stack.imgur.com/pVG7N.png

Code Snippet

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

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 '';
},

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

I have a suggestion on how you could approach this situation:

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 ? 'Navigate to ' + this.roles[next].name : false;
    },
    revertTo() {
      const { previous } = this.roles[this.user.user_role_id];
      return previous ? 'Return 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>

Answer 2

I have a suggestion on how you could approach this situation:

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 ? 'Navigate to ' + this.roles[next].name : false;
    },
    revertTo() {
      const { previous } = this.roles[this.user.user_role_id];
      return previous ? 'Return 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>

Customize button text in Vue using data variable conditions

Answer №1

Similar questions

How can I create clickable table entries using php and html?

Is it possible to modify the HTML/CSS of a child component using the parent component in Angular 2+?

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

Is there a way to hide a paragraph or div using javascript?

I possess an array of objects that includes both images and documents. My goal is to examine the mime_type of each object and select the first element in React to be displayed within an <img> tag

Find out which way the user is scrolling in your React js application

Issue with Pagination functionality when using Material-UI component is causing unexpected behavior

Is there a way to retrieve command line arguments from a running Electron Application?

Interacting with a Web API using JavaScript following successful authentication with Azure AD B2C

Having difficulties accessing the git repository through the application

Background loading of child application in single-spa

definition of a function with another function

Modify text using JQuery when the span is clicked

Should the ListItem expand and collapse when clicked?

Is there a way to track the number of visits by a 'user' to a website?

The issue arises when attempting to utilize ExpressJS middleware in conjunction with NextJS Link feature

Updating with Setstate

Complete the dynamic form submission in a non-blocking manner

Express server unable to process Fetch POST request body

What is the best way to integrate AJAX with draggable columns in a Laravel application?