如何在 vuetify 中获取使用动态数组的工具提示？

Question

我想从动态生成的数组中制作工具提示。

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};
      });
    }
  }
})

但这不起作用。我该如何解决？

Answer 1

这不起作用，因为函数中返回的数据不是响应式的。

如果您的原始数据数组由于某种原因在每个对象中没有“显示”属性，您必须首先将show 属性添加到您的数据中（例如在 created 钩子上），然后绑定v-for 循环到数据而不是你的方法。

<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)
      })
    }
  }
})

这里的工作示例： https://codepen.io/CodingDeer/pen/XvEXOo?editors=1010