Nuxt.js: Nuxt scoped slot not working

[paperclipmonkey]

Scoped slots seem to be broken in Nuxt.js for me.
Properties don't seem to be being re-scoped using 'slot-scope'. This used to work for me so not sure what's changed in my setup. Same code works fine in Vue.js setup with vue-webpack. What am I missing?
Minimum case created on Glitch:
https://glitch.com/edit/#!/tart-radiator?path=pages/index.vue:1:0
https://tart-radiator.glitch.me/

_{This question is available on Nuxt.js community (#c1987)}

[sebastianks]

Hello. I think you should slightly rewrite your code. I think you should try to slot in the items array to the component, and make your v-for in here instead of trying to pass in a single item from the array. To me it seems like you're misunderstanding scoped-slots a bit?

Also, wouldn't it be easier to do something like this:

<my-awesome-list :items="items" />

and then in MyAwesomeList.vue:

<ul>
    <li
      v-for="item in items"
    >
         {{item.text}}
    </li>
</ul>

You have a mix-match of binding an array to a component, and using slots. For me, slots is used to allow some backend code to alter the template of a Vue component - not binding data.

[paperclipmonkey]

Hi @sebastianks
Sorry for the lack of more context, I took the code directly from the Vue documentation. Unless I'm missing some subtlety I've implemented it as they described.
https://vuejs.org/v2/guide/components.html#Scoped-Slots

Here's the same code running under Vue.js latest. The scoped slots work when being used inside a v-for inside a template.

http://jsfiddle.net/Lvmbwr7v/

[sebastianks]

Hello again.

Fair enough. I just don't think your approach is the easiest way, but that's totally up to you. I would just bind the array to the component, and use the data like that. Instead of slotting stuff :)

I am not sure if this is an actual issue tho'.

[zikeji]

@paperclipmonkey this issue was fixed on the development branch. I ran into it as well. I'm presently running the development branch myself, hoping for a rc12 before we hit production.

The Glitch link wouldn't work with the dev branch because it wasn't running the nuxt postinstall, but just update your package.json to use the dev branch and try again.

    "nuxt": "git://github.com/nuxt/nuxt.js.git#dev"

[paperclipmonkey]

Thanks @zikeji that fixed it!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.