Vue.js 如何仅在选择某个选项卡时显示图标？

对于这个网站，我有两个登录标签，如下图所示，现在很难理解选择了哪个登录标签

<v-icon v-if="tab === selectedTab" right >mdi-check-circle-outline</v-icon> 

我试图在所选选项卡旁边显示一个图标，但当前它显示两个选项卡的图标。因此，总的来说，我试图只显示所选选项卡的图标，如果我更改了选项卡，它会从先前选择的选项卡中隐藏图标，并显示到当前选项卡

这就是我的全部代码-

<template>
  <v-main id="login">
    <v-container fill-height fluid>
      <v-layout align-center justify-center>
        <v-flex md4 sm8 xs12>
          <v-card class="elevation-12">
            <v-toolbar color="primary" dark>
              <v-toolbar-title>
                <v-icon left> mdi-login-variant </v-icon>
                {{ $t("welcome") }}
              </v-toolbar-title>
            </v-toolbar>
            <v-divider />
            <v-tabs v-model="selectedTab" grow hide-slider>
              <v-tab
                v-for="(tab, i) in tabs"
                :key="i"
                :class="{
                  'primary white--text': tab == selectedTab,
                  caption: tab != selectedTab,
                }"
                :href="`#${tab}`"
                class="pa-0"
              >
                {{ tab }}
                 //This is the icon line that I added
                <v-icon right >mdi-check-circle-outline</v-icon> 
              </v-tab>
              <v-tab-item
                v-for="(tab, i) in tabs"
                :key="i"
                :value="tab"
                reverse-transition="scale-transition"
                transition="scale-transition"
              >
                <v-divider />
                <v-card-text>
                  <v-form @submit.prevent="login">
                    <v-text-field
                      v-model.lazy="username"
                      :label="$t('username')"
                      :prepend-inner-icon="
                        tab === 'Windows' ? 'mdi-windows' : 'mdi-account'
                      "
                      :rules="[username !== null || required]"
                      name="username"
                      outlined
                      placeholder=" "
                      type="text"
                    />
                    <v-text-field
                      v-model.lazy="password"
                      :label="$t('password')"
                      :rules="[password !== null || required]"
                      name="password"
                      outlined
                      placeholder=" "
                      prepend-inner-icon="mdi-lock"
                      type="password"
                    />
                    <!-- If error, rended error component -->
                    <error-view
                      v-if="error"
                      :error="error"
                      :is-login="true"
                      class="pa-0"
                    />
                    <v-card-actions class="pa-0">
                      <v-spacer />
                      <v-btn :loading="loading" color="primary" type="submit">
                        {{ $t("submit") }}
                      </v-btn>
                    </v-card-actions>
                  </v-form>
                </v-card-text>
              </v-tab-item>
            </v-tabs>
            <div id="version-div">
              <app-version />
            </div>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-main>
</template>

<script>
import AppVersion from "@/components/version";

const errorView = () => import("@/components/errorView");

export default {
  name: "Login",
  components: {
    errorView,
    AppVersion,
  },

  data() {
    return {
      tabs: ["Windows", "Standard"],
      selectedTab: "Standard",
      username: null,
      password: null,
      loading: false,
      error: null,
      required: (value) => !!value || this.$t("req"),
    };
  },

  methods: {
    resetForm(value) {
      this.username = this.password = value;
    },
    login() {
      if (!this.username || !this.password) {
        this.error = this.$t("warn");
        this.resetForm(null);
      } else {
        this.loading = true;
        const encodedPass = window.btoa(
          unescape(encodeURIComponent(this.password))
        );
        this.$store
          .dispatch("retrieveUser", {
            username: this.username,
            password: encodedPass,
            outside: this.selectedTab === "Windows" ? false : true,
          })
          .then(() => {
            this.$router.push({ name: "home" });
            this.error = null;
          })
          .catch((error) => {
            this.error = error;
          })
          .finally(() => {
            this.resetForm("");
            this.loading = false;
          });
      }
    },
  },
};
</script>

mdi登录变量
{{$t（“欢迎”）}
{{tab}}
//这是我添加的图标行
检查圆轮廓
{{$t（“提交”）}
从“@/components/version”导入AppVersion；
常量错误视图=（）=>导入（@/components/errorView）；
导出默认值{
名称：“登录”，
组成部分：{
错误视图，
应用程序版本，
},
数据（）{
返回{
选项卡：[“窗口”、“标准”]，
选择选项卡：“标准”，
用户名：null，
密码：null，
加载：false，
错误：null，
必需：（值）=>！！值| |此.$t（“请求”），
};
},
方法：{
重置表单（值）{
this.username=this.password=value；
},
登录（）{
如果（！this.username | |！this.password）{
this.error=this.$t（“警告”）；
此.resetForm（null）；
}否则{
这是。加载=真；
const encodedPass=window.btoa(
unescape（encodeURIComponent（this.password））
);
这是一家$1的商店
.dispatch（“retrieveUser”{
用户名：this.username，
密码：encodedPass，
外部：this.selectedTab==“Windows”？false:true，
})
.然后（（）=>{
这是.$router.push（{name:“home”}）；
this.error=null；
})
.catch（（错误）=>{
this.error=错误；
})
.最后（（）=>{
本表格以（“”）号填列；
这一点：加载=错误；
});
}
},
},
};

---

提前谢谢你

您实际上已经在代码的不同部分实现了该解决方案

对

'primary white--text'

上的类绑定应用相同的条件。

v图标

可以基于所选的选项卡

<v-icon v-if="tab === selectedTab" right >mdi-check-circle-outline</v-icon> 

mdi检查圆轮廓

我实际上也在尝试做类似的事情，但方式略有不同，我不明白为什么它不起作用。非常感谢你！谢谢你的帮助！