Vue.js Vuetify默认按钮带有图标，切换时更改颜色

我是Vuetify和Vue.js的新手，我正在尝试使用两个按钮使用两种不同的路由进行api调用。这是可行的，但是，我需要一种方法来设置默认按钮的某种颜色，就像一个复选标记。然后，在单击另一个按钮时设置相同的值

当页面显示时，我试图将新患者设置为特定颜色，并带有一个复选图标。然后，当选择Recall Patient时，用相同的图标切换相同的颜色

这是我的密码：

 <v-row justify="space-around">
                      <v-btn
                        @click="fortyFive"
                        rounded
                      >
                      New Patient
                      </v-btn>
                      <v-btn
                        @click="seventyFive"
                        rounded
                      >
                        Recall Patient
                      </v-btn>
              </v-row>

---

现在我们应该在这里使用一些

vuejs

基础知识

• 首先是一个属性，它将设置当前选定的按钮标识符
• 基于该数据属性，我们可以使用

  v-if

  更改我们想要的颜色或图标

现在单击按钮设置此属性。我正在根据您的命名约定选择

75

或

45

。你可以选择你想要的任何东西

seventyFive () {
  this.selectedButton = 75;
  this.fetchData75()
},
fortyFive () {
  this.selectedButton = 45;
  this.fetchData45()
},

制作包含颜色和图标的按钮。Vuetify语法是

<v-btn rounded color="primary">
   Primary
   <v-icon dark>mdi-check</v-icon>
</v-btn>

---

现在我们应该在这里使用一些

vuejs

基础知识

• 首先是一个属性，它将设置当前选定的按钮标识符
• 基于该数据属性，我们可以使用

  v-if

  更改我们想要的颜色或图标

现在单击按钮设置此属性。我正在根据您的命名约定选择

75

或

45

。你可以选择你想要的任何东西

seventyFive () {
  this.selectedButton = 75;
  this.fetchData75()
},
fortyFive () {
  this.selectedButton = 45;
  this.fetchData45()
},

制作包含颜色和图标的按钮。Vuetify语法是

<v-btn rounded color="primary">
   Primary
   <v-icon dark>mdi-check</v-icon>
</v-btn>

<v-btn @click="fortyFive" rounded :color="selectedButton == 45 ? 'primary' : ''">
   New Patient
   <v-icon dark v-if="selectedButton == 45">mdi-check</v-icon>
</v-btn>
<v-btn @click="seventyFive" rounded :color="selectedButton == 75 ? 'primary' : ''">
   Recall Patient
   <v-icon dark v-if="selectedButton == 75">mdi-check</v-icon>
</v-btn>