vue.js - v槽:badge and v-if does not work with a computed property

Question

我正在开发一个 CMS 项目，但有一个无法解决的问题。 我有一个显示 IP 的组件。在更改时，我希望出现一个徽章，以便用户知道“此字段已更改”。

但问题是，如果我使用“v-slot:badge”，徽章将不会显示。 在 v-if 中，它是一个计算属性，如果我使用 vue devtools 检查页面，“isStartIpValueChanged”将在更改时为 true。那么，它应该可以正常工作吗？

模板

<v-list-item-content>
<v-form ref="form" v-model="valid">
  <v-hover v-slot:default="{ hover }">
    <v-row align-content="center" no-gutters>
      <v-col>
        <v-badge overlap color="red" right>
          <template v-slot:badge v-if="isStartIpValueChanged">
            <v-avatar color="red" size="6"></v-avatar>
          </template>
          <v-text-field
            dense
            :rules="apiIpRules"
            v-model="apiIp.startIp"
            @input="valueChanged()"
            ref="startIp"
            :class="hover ? 'hover-text-color' : ''"
            placeholder="###.###.###.###">
          </v-text-field>
        </v-badge>
      </v-col>
      <v-col cols="1" class="text-center" align-self="center">
        <p>-</p>
      </v-col>
      <v-col cols="1" class="text-center" align-self="center">
        <v-btn v-show="hover" @click="deleteIp()" icon small color="red"><v-icon>mdi-minus-circle</v-icon></v-btn>
      </v-col>
    </v-row>
  </v-hover>
</v-form>

创建并计算(apiIp 是我从父组件获得的 Prop )

    created () {
    this.apiIpsOriginalValueStartIp = this.apiIp.startIp
    this.apiIpsOriginalValueEndIp = this.apiIp.endIp
    this.apiIp.uuid = this.GenerateUUID()
  },

    computed: {
    isStartIpValueChanged () {
      return this.apiIp &&
        (this.apiIp.startIp !== this.apiIpsOriginalValueStartIp ||
        this.apiIp.uuid === null)
    },
    isEndIpValueChanged () {
      return this.apiIp &&
        (this.apiIp.endIp !== this.apiIpsOriginalValueEndIp ||
        this.apiIp.uuid === null)
    }
  },

有人知道这里出了什么问题吗？

Answer 1

根据 Vuetify 自己的文档，您应该直接在 v-badge 上使用 v-model，仅在需要时才显示它。

<v-badge overlap color="red" right v-model="isStartIpValueChanged">
  <template v-slot:badge>
    <v-avatar color="red" size="6"></v-avatar>
  </template>
  <v-text-field
    dense
    :rules="apiIpRules"
    v-model="apiIp.startIp"
    @input="valueChanged()"
    ref="startIp"
    :class="hover ? 'hover-text-color' : ''"
    placeholder="###.###.###.###">
  </v-text-field>
</v-badge>

文档:https://vuetifyjs.com/en/components/badges#show-on-hover