Отсутствует слот с областью действия по умолчанию

Question

Я просматриваю учебные пособия на странице Vues для добавления всплывающих подсказок. https://vuetifyjs.com/en/components/tooltips

Вроде бы нормально работает для отдельной кнопки.

Однако, он не работает в v-элементе. Я получаю консольное сообщение «1006»

'[Vuetify] v-элементу отсутствует слот 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>

Answer 1

После отладки фрагмента кода я нашел решение, добавив 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>