如何获取在 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"属性，则必须首先将show属性添加到数据中(例如在创建的钩子上(，然后将 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