Question

我添加了一张vuetify卡和一个按钮。 我希望单击该按钮时该卡消失。我该怎么办？

下面是我的组件的外观。我想添加一个方法来这样做，但是不知道该方法是什么。

<template>
  <div class="notifications">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card flat color="green">

          <v-card-title primary-title>
            <div>
              <h3 class="headline">Neu Benutzer angelegt</h3>
              <div> {{ card_text }} </div>
            </div>
          </v-card-title>

          <v-card-actions>
            <div class="close"><v-btn @click="removeMessage(2)">Ok</v-btn></div>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        card_text: 'Success!'
      }
    },
    methods: {
      removeMessage(seconds) {

      },
    },
  };

</script>

Answer 1

您可以使用array syncWithoutDetaching(Collection|Model|array $ids)和一个布尔标志将其隐藏：

v-if

Answer 2

您还可以使用v-show并进行如下操作：CodePen

如何在单击按钮时删除vuetify卡

2 个答案: