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

dicktalens commented 3 years ago

I'm getting the error above upon implementing everything as per the documentation (I'm following the async instructions). Just in case I missed a step, I actually implemented the exact code (below the demo) in a completely new .vue file, and I'm still getting the same error. Any help would be appreciated!

Niaz-estefaie commented 3 years ago

The same issue just happened to me. When I added the whole code which the document said so I'm getting this.$scopedSlots.default is not a function constantly. The vue version that I'm using is "2.6.12".

zhuxinping commented 2 years ago

the answer is below ； getInput () { this.$scopedSlots; this.$slots; console.log(this.$scopedSlots) console.log(this.$slots) // debugger const [vnode] = this.$slots.default; if (vnode) { if (vnode.elm.nodeName === 'INPUT' || vnode.elm.nodeName === 'TEXTAREA' || vnode.elm.isContentEditable) { return vnode.elm } else { return vnode.elm.querySelector('input') || vnode.elm.querySelector('textarea') || vnode.elm.querySelector('[contenteditable="true"]') } } return null },

sonnb commented 2 years ago

Just in case someone else looking at this issue: This happens when you have v-if in your inner component (the default slot). For example:

`

</Mentionable>
`

If the condition is not satisficed, this issue will happen because it cannot look for the required element.            </div>
        </div>
    
    <div class="page-bar-simple">
            </div>

<div class="footer">
        <ul class="body">
            <li>© <script>
                    document.write(new Date().getFullYear())
                </script> Githubissues.</li>
            <li>Githubissues is a development platform for aggregating issues.</li>
        </ul>
    </div>

</html>

Akryum / vue-mention

TypeError: this.$scopedSlots.default is not a function #33