How to get tooltips working with dynamic array in vuetify?

Question

I want to make tooltips from a dynamically generated array.

https://codepen.io/sneaky666/pen/BXrjOp?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="text-center">
      <v-layout
        flex
        justify-space-between
        wrap
      >
        <v-flex xs12 class="mt-12">
           <v-tooltip v-for="item in getData()" v-model="item.show" top>
             <template v-slot:activator="{ on }">
                 <v-btn @click="item.show = !item.show">{{item.data.name}}</v-btn>
              </template>
            <span>{{item.data.name}}</span>
           </v-tooltip>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

js

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      actions : [{name:"a"},{name:"b"},{name:"c"},{name:"d"}],
      show: false,
    }
  },
  methods : {
    getData : function() {
      return this.actions.concat({name:"e"}).map(function(x) {
        return {data : x, show:false};
      });
    }
  }
})

but this doesn't work. How can I fix it?

Cathy Ha Cathy Ha · Accepted Answer · 2019-08-08T00:24:11

This doesn't work because data returned in a function is not reactive.

If your original data array for some reason doesn't have the "show" property in each object, you have to first, add the show property to your data (for example on the created hook), then bind the v-for loop to data rather than to your method.

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="text-center">
      <v-layout
        flex
        justify-space-between
        wrap
      >
        <v-flex xs12 class="mt-12">
           <v-tooltip v-for="item in actions" v-model="item.show" top>
             <template v-slot:activator="{ on }">
                 <v-btn @click="item.show = !item.show">{{ item.name }}</v-btn>
              </template>
            <span>{{item.name}}</span>
           </v-tooltip>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  created() {
    this.appendShow();
  },
  data () {
    return {
      actions : [{ name:"a"},{name:"b"},{name:"c"},{name:"d"}],
      show: true,
    }
  },
  methods : {
    appendShow : function() {
      let vm = this;
      this.actions.push({ name: "e" })
      this.actions.forEach(action => {
        vm.$set(action, 'show', false)
      })
    }
  }
})

Working example here: https://codepen.io/CodingDeer/pen/XvEXOo?editors=1010

How to get tooltips working with dynamic array in vuetify?

1 Answers