Vue текст условной кнопки на основе переменной данных - PullRequest
Новая
       7

Vue текст условной кнопки на основе переменной данных

1 голос
/ 17 апреля 2020

У меня есть 3 стола в столе с role_id 2, 4 и 6. У меня есть две таблицы. Я хочу отобразить другое имя роли на кнопке на основе текущего пользователя role_id.

Я хочу отобразить:

  • имя роли, имеющее role_id 4, если текущий user_role_id = 2
  • имя роли, имеющее role_id 6, если текущий user_role_id = 4.

таблица пользователя enter image description here

стол регистрации enter image description here

код 

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

1 Ответ

1 голос
/ 17 апреля 2020

Это мое лучшее предположение о том, что вы пытаетесь сделать: 

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