Vue: $scopedSlots.default is not a function

[chaishi]

render (createElement) {
    return createElement('thead', [
      createElement('tr', this.cols.map(item => {
        return createElement('th', [
          this.$scopedSlots.default({
            item: item
          })
        ])
      }))
    ])
  },

TypeError: _this.$scopedSlots.default is not a function

[posva]

Hi!
Please make sure to follow the Issue Reporting Guidelines before opening an issue.
Thanks!

[lsycxyj]

I met the same problem. And it seems that there is no solution. This issue can be found on:
https://forum.vuejs.org/t/weird-vuejs-error-with-elementui-table--self-scopedslots-default-is-not-a-function/12933

[WhereJuly]

Got the same error within a component's render function. Fixed with adding the HTML element with slot-scope="{item: item}" (just to match the example of the OP) insde the component.

Here is some code extract:

// The ComponentWithRenderFunction JS part of the component

this.render = function() {
    return this.$scopedSlots.default({
        item: this.$data.item
    });
};

<!-- The above component's HTML part -->
<component-with-render-function>
    <div slot-scope="{item: item}">
        {{ item }}
    </div>
</component-with-render-function>

The thing is, to my understanding, that until you create a scoped slot in the markup it is not available in the render function.

[begueradj]

In my case that happened because I did not inject props data from the parent component where it is used. This is exactly what @WhereJuly WhereJuly avoided (side note: you can write directly item: this.item instead of item: this.$data.item)

[WhereJuly]

you can write directly item: this.item instead of item: this.$data.item

@begueradj That its true. However short forms often convey the code intention much poorere than the explicit ones.

So the explicit use of this.$data.zzz, this.$props.yyy and the like is much better for the code clarity. All the times one uses props and data the relations between their items are quite stable.

E.g. you would always take values from props and put these to data. Not vice versa. Thus explicit mention this.$data.zzz and this.$props.yyy at one sight gives a reader the much clearer understanding of what goes where.