V-slot:徽章和v-if不适用于计算属性

Question

我正在做一个CMS项目，我有一个问题我搞不清楚。我有一个组件，在那里我正在显示IP的。在更改时，我希望出现一个徽章，这样用户就知道“此字段已更改”。

但问题是，如果我使用"v-slot: badge“，徽章就不会显示出来。在v-if是一个计算属性时，如果我使用vue devtools检查页面，则更改时‘isStartIpValueChanged’将为真。所以，它应该可以工作，对吗？

模板

<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是我从父组件获得的道具)

    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