CODEWITHSUNDEEP
vue.jsvuetify.js
djcaesar9114
djcaesar9114

Reputation: 2137

Vuetify tooltip prevent "v-if" component to reappear

I have a button which should be displayed if a value is bigger than 2, so I wrote a "v-if" condition. Everything works fine, but when I add a tooltip, the button doesn't reappear when the "v-if" conditionis fulfilled.

Here is the example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      val: 5
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-container fluid class="text-center">
        <v-row
          class="flex"
          justify="space-between"
        >
          <v-col cols="12">
            <v-btn @click="val++">+</v-btn>
            <v-btn @click="val--">-</v-btn>
          </v-col>
          <v-col cols="12">
            {{ val }}
          </v-col>
          <v-col cols="12" class="mt-2">
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn color="green" v-if="val > 2" v-on="on">
                  > 2
                </v-btn>
              </template>
              <span>tooltip</span>
            </v-tooltip>
          </v-col>
          <v-col cols="12" class="mt-12">
            <v-btn color="blue" v-if="val > 2" v-on="on">
              > 2
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app>
  </div>
</body>

</html>

Could anybody give me a clue on what happens here? Thanks in advance

Upvotes: 1

Views: 3138

Answers (1)

Jason Smith
Jason Smith

Reputation: 1209

You should put the v-if directive on the v-tooltip element instead of the button, or use v-show on the button instead of v-if.

The reason that the button doesn't appear is that the button is in a slot of the tooltip. Using v-if, the button is not rendered, so the slot is blank, forcing the tooltip component to use the default slot contents. You can't re-fill an empty slot, at least in Vuetify. v-show works because the button is still rendered to the DOM, it is only hidden.

USING V-IF ON THE TOOLTIP:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      val: 5
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-container fluid class="text-center">
        <v-row
          class="flex"
          justify="space-between"
        >
          <v-col cols="12">
            <v-btn @click="val++">+</v-btn>
            <v-btn @click="val--">-</v-btn>
          </v-col>
          <v-col cols="12">
            {{ val }}
          </v-col>
          <v-col cols="12" class="mt-2">
            <v-tooltip bottom v-if="val > 2">
              <template v-slot:activator="{ on }">
                <v-btn color="green" v-on="on">
                  > 2
                </v-btn>
              </template>
              <span>tooltip</span>
            </v-tooltip>
          </v-col>
          <v-col cols="12" class="mt-12">
            <v-btn color="blue" v-if="val > 2">
              > 2
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app>
  </div>
</body>

</html>

USING V-SHOW ON THE BUTTON:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      val: 5
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-container fluid class="text-center">
        <v-row
          class="flex"
          justify="space-between"
        >
          <v-col cols="12">
            <v-btn @click="val++">+</v-btn>
            <v-btn @click="val--">-</v-btn>
          </v-col>
          <v-col cols="12">
            {{ val }}
          </v-col>
          <v-col cols="12" class="mt-2">
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn color="green" v-show="val > 2" v-on="on">
                  > 2
                </v-btn>
              </template>
              <span>tooltip</span>
            </v-tooltip>
          </v-col>
          <v-col cols="12" class="mt-12">
            <v-btn color="blue" v-if="val > 2">
              > 2
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app>
  </div>
</body>

</html>

Upvotes: 3

Related Questions