[Vuejs]-How to bind on properties of a named slot

by

0👍

✅

The correct syntax is

<template #scopedSlot="slotProps">

or

<template v-slot:scopedSlot="slotProps">

The # is shorthand for v-slot:, so in your initial code, you were assigning to the scopedSlot without using slotProps, and then again to the default slot, this time using slotProps, and Vue complained.

👤Moritz Ringler

1👍

Firstly, in BaseLayer_0.vue, in the

<slot name="scopedSlot" :text="greetingMessage" :count="1"></slot> section,

you used the shorthand : for v-bind to bind the text attribute. Therefore, greetingMessage is treated as a variable, but you haven’t declared the greetingMessage variable in the script.

Hence, you need to add the following:

#BaseLayer_0.vue

<script>
export default { 
  name: 'BaseLayer_0',
  data() {
    return {
      greetingMessage: 'hello word'
    }
  }
}
</script>

Secondly, in the following code snippet, there is also an issue:

#app.vue

<template #scopedSlot v-slot="slotProps">
   {{slotProps.text}} {{ slotProps.count }}
</template>

It should be corrected to:

<template #scopedSlot="{ text, count }">
   {{ text }} {{ count }}
</template>

codesandbox demo

👤Walens

Leave a comment