javascript - 基于数据变量的Vue条件按钮文本

Question

我在一张有role_id2、4 和 6 个桌子的桌子上有 3 张桌子。我有两张桌子。我想根据当前用户的role_id.

我想显示：

• role_id如果 current user_role_id= 2 ，则角色名称为4
• role_id如果 current user_role_id= 4 ，则角色名称为6。

用户表

登记表

代码

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

脚本代码

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

标签： javascriptvue.jsvuejs2vue-component

Answer 1

这是我对您要执行的操作的最佳猜测：

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>