显示图像/图标时包含文本答案

【问题标题】：Including text when an image/icon is shown显示图像/图标时包含文本
【发布时间】：2021-03-07 16:23:56
【问题描述】：

目前我正在尝试在页面上显示图像和/或图标时包含不同的文本。这是vue文件的代码：

<template>
  <div class="profile">
    <div
      :class="{
        'flags--relevant': hasFlagType('medication'),
        'flags--active': flag == 'medication'
      }"
      class="flags"
      @click="setFlag('medication')"
    >
      <medication-icon
        :class="[
          hasFlagType('medication')
            ? 'medication-icon--focus'
            : 'medication-icon--blur',
        ]"
      />
    </div>
    <div
      :class="{
        'flags--relevant': hasFlagType('condition'),
        'flags--active': flag == 'condition'
      }"
      class="flags"
      @click="setFlag('condition')"
    >
      <treatment-icon
        :class="[
          hasFlagType('condition')
            ? 'treatment-icon--focus'
            : 'treatment-icon--blur',
        ]"
      />
    </div>
    <div
      :class="{
        'flags--relevant': hasFlagType('translator'),
        'flags--active': flag == 'translator',
      }"
      class="flags"
      @click="setFlag('translator')"
    >
      <foreign-dialect-icon
        :class="[
          hasFlagType('translator')
            ? 'foreign-dialect-icon--focus'
            : 'foreign-dialect-icon--blur',
        ]"
      />
    </div>
  </div>
</template>
<script>

export default {
  components: {
    ForeignDialectIcon,
    MedicationIcon,
    TreatmentIcon,
  },
  props: {
    userFlags: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      flags: this.userFlags,
      flag: null,
      title: "Requires daily medication",
      title2: "Specialist health condition",
      title3: "Requires a translator",
    };
  },
  methods: {
    hasFlagType(flagType) {
      return this.flags[flagType] !== undefined;
    },
    setFlag(flagType) {
      if (this.hasFlagType(flagType)) {
        this.flag = flagType;
      }
    },
    resetFlag() {
      this.flag = null;
    },
  },
};
</script>

我已尝试在数据部分中为每个图标输出标题，即使图标未显示，它们仍会显示。我需要它在显示图像时输出标题，而我尝试过的许多尝试都没有奏效，所以想知道如何解决这个问题？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

假设标题只应在相应图标被聚焦时出现，您可以使用与v-if 相同的条件（hasFlagType(...)）来呈现title：

<div>
  <medication-icon .../>
  <span v-if="hasFlagType('medication')">{{ title }}</span>
</div>
<div>
  <treatment-icon .../>
  <span v-if="hasFlagType('condition')">{{ title2 }}</span>
</div>
<div>
  <foreign-dialect-icon .../>
  <span v-if="hasFlagType('translator')">{{ title3 }}</span>
</div>

【讨论】：