Question

我试图显示一个编辑按钮，然后使用mouseenter和mouseleave打开一个对话框，以进行单击。在进入编辑按钮时会显示出来，但是一旦我点击它就会被隐藏起来。有人可以告诉我我在做什么错。编辑按钮位于DueDateAddM组件内部。

<v-card-title class="mx-5">{{dayjs(key).format('DD MMM YYYY')}}</v-card-title>
                <v-col v-for="(item, i) in value" :key="i">
                  <v-card-text
                    class="black--text py-0"
                    @mouseenter="item.isEdit=true"
                    @mouseleave="item.isEdit=false"
                  >
                    <v-row>
                      <span v-if="!item.isEdit" class="grey--text mr-1">#{{item.id}}</span>
                      <span
                        v-show="isLoggedIn"
                        v-if="item.isEdit"
                        class="mr-1"
                        @click="editDuedate"
                      >
                        <DuedateAddM :propItem="item" :duedateId="item.id" />
                      </span>
                      {{item.descp}}
                      <v-tooltip top>
                        <template v-slot:activator="{ on }">
                          <v-chip class="mx-1 py-0" small label v-on="on" v-if="item.previousdate">
                            <v-icon color="grey" small class="mr-1">fas fa-info-circle</v-icon>
                            <span>{{dayjs(item.previousdate).format("DD MMM YYYY")}}</span>
                            <span v-if="!item.previousdate">No Previous date found</span>
                          </v-chip>
                        </template>
                        <span>Previous Duedate</span>
                      </v-tooltip>
                      <v-tooltip top>
                        <template v-slot:activator="{ on }">
                          <v-chip small v-on="on" class="mx-1">
                            <v-icon color="grey" small class="mr-1">fas fa-tag</v-icon>
                            {{item.category}}
                          </v-chip>
                        </template>
                        <span>Category</span>
                      </v-tooltip>
                      <v-tooltip top>
                        <template v-slot:activator="{ on }">
                          <v-chip color="red lighten-4" small class="mx-1" v-on="on">
                            <v-icon color="grey" small class="mr-1">fas fa-map-marker-alt</v-icon>
                            {{item.region}}
                          </v-chip>
                        </template>
                        <span>Region</span>
                      </v-tooltip>
                    </v-row>
                    <v-row v-if="item.applicableto">
                      <v-subheader class="ml-1">Applicable To: "{{item.applicableto}}"</v-subheader>
                    </v-row>
                    <v-divider class="mt-2"></v-divider>
                  </v-card-text>
                </v-col>

Answer 1

使用v-show代替v-if

                      <span v-show="!item.isEdit" class="grey--text mr-1">#{{item.id}}</span>
                      <span
                        v-show="isLoggedIn"
                        v-show="item.isEdit"
                        class="mr-1"
                        @click="editDuedate"
                      >
                        <DuedateAddM :propItem="item" :duedateId="item.id" />
                      </span>

在mouseenter vuetify上显示对话框

1 个答案: