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

    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-model上直接使用v-badge，仅在需要时显示它。

<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

v-slot：徽章和v-if不适用于计算的属性

1 个答案: