时间戳

首页 > 解决方案 > Vuetify 带有图标的默认按钮并在切换时更改颜色

vue.js - Vuetify 带有图标的默认按钮并在切换时更改颜色

问题描述

我是 Vuetify 和 Vue.js 的新手，我正在尝试使用两个按钮来使用两条不同的路由进行 api 调用。那行得通，但是，我需要一种方法将默认按钮设置为某种颜色以及一个复选标记。然后，在单击另一个按钮时进行相同的设置。 在此处输入图像描述

当页面我试图将新患者设置为某种颜色以及一个复选图标时。Then when Recall Patient is selected, to switch that same color with the same Icon.

这是我的代码：

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

点击

seventyFive () {
  this.fetchData75()
},
fortyFive () {
  this.fetchData45()
},

标签： vue.jsvuetify.js

解决方案

vuejs现在我们应该在这里使用一些基础知识。

  • 首先是一个属性，它将设置当前选定的按钮标识符。
  • 基于该数据属性，我们可以使用v-if任何我们想要的更改颜色或图标。
// define selectedButton property
data: function () {
    return {
      selectedButton: null,
    }
  },

现在单击按钮设置此属性。我正在选择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>

现在修改您的模板以根据值更改相同的颜色selectedButton

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

推荐阅读