缺少默认作用域插槽 Vuetify

Posted 2023-02-22

【中文标题】缺少默认作用域插槽 Vuetify

【英文标题】：Missing a default scoped slot Vuetify

【发布时间】：2019-06-03 07:26:01

【问题描述】：

我正在查看 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 添加的 sn-p ：

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>

【问题讨论】：

请复制您的代码here以便调试

您似乎已将其添加到该链接。谢谢！

我正在寻找您添加缺少的部分

我不确定我是否在关注你。唯一要添加的是指向一个真正的 v 图标，例如您使用的“家”图标

@BoussadjraBrahim 为什么建议使用 CodePens 而不是 Runnable Snippets？

【参考方案1】：

调试代码 sn-p 后，我通过将 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>

【讨论】：

嗯，当我在我的代码中尝试它时，我收到 es-lint 警告说 'i' 已定义但从未使用过（它指向 v-for 循环中的 'i'）。在插槽范围内如何引用它的语法是否正确？

不幸的是，由于该错误，代码无法为我运行

试试这个<v-flex v-for="n in bars" :key="n" xs12 md4> <v-item > <v-tooltip slot-scope="active" right>...

我得到了关于“活动”是如何定义但从未使用过的相同错误