javascript - 缺少默认作用域插槽 Vuetify
问题描述
我正在查看 vues 页面上添加工具提示的教程。https://vuetifyjs.com/en/components/tooltips
它似乎适用于单个按钮。
但是,它在 v-item 中不起作用。我收到一条控制台消息说
'[Vuetify] v-item 缺少默认的 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>
我已经尝试在上面的代码中添加一些东西,比如将 slot="activator" 添加到 v-item 并将 slot-scope="activator" 添加到 v-btn,但似乎没有什么能正常工作。关于我做错了什么的任何建议?
@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>
解决方案
调试代码片段后,我通过添加slot-scope="i"
到tooltip
组件中找到了解决方案,例如<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>
推荐阅读
- python - 加载可在 Flask 中修改的设置的最佳方法
- c++ - 无法在没有“auto”关键字的情况下在 lambda 中移动捕获
- mysql - 在同一张表上有两个连接的连续 WHERE
- http - 如何在 HTTP.jl 中格式化请求以包含证书文件
- iis - 在 IIS 上为 Coldfusion Lucee 创建虚拟目录
- php - 如何在 20 分钟后在 laravel 中使用碳来获取时间?
- php - 如何在 php mysqli 中使用绑定参数更新空值
- google-apps-script - 日历到表格脚本的日期选择器
- python - python3/windows-10 UDP 套接字错误?
- bamboo - 如何找到我创建的所有构建计划?