缺少默认的范围插槽 Vuetify [英] Missing a default scoped slot Vuetify
问题描述
我正在查看 vues 页面上的教程以添加工具提示.https://vuetifyjs.com/en/components/tooltips
对于单个按钮似乎可以正常工作.
但是,它在 v-item 中不起作用.我收到一条控制台消息,内容为
<块引用>'[Vuetify] v-item 缺少默认的 scopedSlot'
<v-工具提示><v-btn slot="激活器"><v-icon>some-icon</v-icon></v-btn><span>一些工具提示文本</span></v-工具提示></v-item>
我已经尝试在上面的代码中添加一些东西,比如将 slot="activator" 添加到 v-item 和将 slot-scope="activator" 添加到 v-btn,但似乎没有任何东西可以正常工作.关于我做错了什么的任何建议?
@BoussadjraBrahim 添加的运行片段:
new Vue({el: '#app',数据() {返回 {酒吧:['a','b','c']}}})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></脚本><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|材料+图标"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"><div id="应用程序"><v-item-group><v-container grid-list-md><v-layout wrap><v-flex v-for="(n,i) in bar" :key="n" xs12 md4><v-item><v-工具提示><v-btn slot="激活器"><v-icon>home</v-icon></v-btn><span>一些工具提示文本 {{n}}</span></v-工具提示></v-item></v-flex></v-layout></v-容器></v-item-group>
在调试代码片段后,我通过将 slot-scope="i"
添加到 tooltip
找到了解决方案code> 组件,如
:
new Vue({el: '#app',数据() {返回 {酒吧:['家','事件','信息']}}})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></脚本><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|材料+图标"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"><div id="app" 数据应用程序><v-item-group ><v-container grid-list-md><v-layout wrap><v-flex v-for="(n,i) in bar" :key="n" xs12 md4><v-item ><v-tooltip slot-scope="i" right><v-btn slot="激活器"><v-icon>{{n}}</v-icon></v-btn><span>{{n}}</span></v-工具提示></v-item></v-flex></v-layout></v-容器></v-item-group>
I am looking at the tutorials on vues page for adding tooltips. https://vuetifyjs.com/en/components/tooltips
It seems to work fine for an individual button.
However, it does not work within a v-item. I get a console message saying
'[Vuetify] v-item is missing a default scopedSlot'
<v-item v-for="foo in bars" :key=`${foo}`>
<v-tooltip>
<v-btn slot="activator">
<v-icon>some-icon</v-icon>
</v-btn>
<span>Some tooltip text</span>
</v-tooltip>
</v-item>
I've tried adding things to the above code like slot="activator" to v-item and slot-scope="activator" to the v-btn, but nothing seems to work quite right. Any suggestions as to what I'm doing wrong?
Running snippet added by @BoussadjraBrahim :
new Vue({
el: '#app',
data() {
return {
bars: ['a', 'b', 'c']
}
}
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
<v-item-group>
<v-container grid-list-md>
<v-layout wrap>
<v-flex v-for="(n,i) in bars" :key="n" xs12 md4>
<v-item>
<v-tooltip>
<v-btn slot="activator">
<v-icon>home</v-icon>
</v-btn>
<span>Some tooltip text {{n}}</span>
</v-tooltip>
</v-item>
</v-flex>
</v-layout>
</v-container>
</v-item-group>
</div>
After debugging the Code snippet i found the solution by adding slot-scope="i"
to the tooltip
component like <v-tooltip slot-scope="i" right>
:
new Vue({
el: '#app',
data() {
return {
bars: ['home', 'event', 'info']
}
}
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
<v-item-group >
<v-container grid-list-md>
<v-layout wrap>
<v-flex v-for="(n,i) in bars" :key="n" xs12 md4>
<v-item >
<v-tooltip slot-scope="i" right>
<v-btn slot="activator">
<v-icon>{{n}}</v-icon>
</v-btn>
<span>{{n}}</span>
</v-tooltip>
</v-item>
</v-flex>
</v-layout>
</v-container>
</v-item-group>
</div>
这篇关于缺少默认的范围插槽 Vuetify的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!