CODEWITHSUNDEEP
vue.jsvuetify.js
radiorz
radiorz

Reputation: 1889

How to use the slot append of v-slider in render function?

As we all know, we can use scopedslots to replace the slot 'item' of v-select or the slot 'thumb-label' of v-slider like this way:

scopedSlots: {
    item: (props) => {
        if (this.$scopedSlots.item) {
            return this.$scopedSlots.item({
                test: 'works',
                item: props.item
            })
        }
    }
},

So we can use slot to replace the component's item's appearance.

But when we want to replace the 'append' slot of vuetify's v-slider on the some way,it doesn't work:

scopedSlots: {
    append: (props) => {
        if (this.$scopedSlots.append) {
            return this.$scopedSlots.append({
                test: 'works',
                item: props.item
            })
        }
    }
},

Is it different to a normal slot and a scoped slot .

If we use it in template，we just use v-slot:append to replace the slot's appearance：

<v-slider>
    <template v-slot:append>
        works
    </template>
</v-slider>

How to use this slots in a render function? https://codepen.io/radiorz/pen/BaQeBOj

Upvotes: 1

Views: 2765

Answers (1)

tony19
tony19

Reputation: 138476

Vuetify only generates the append slot if it finds append or append-outer in $slots, but Vue only copies scopedSlots into $slots when the value has a proxy property, which is an internal flag set for v-slot.

A hacky workaround is to set this proxy flag on the scopedSlots.append value:

const makeSlot = fn => {
  fn.proxy = true // workaround to copy into $slots
  return fn
}

const SliderWithSlot = {
  name: "SliderWithSlot",
  props: {},
  render(createElement) {
    return createElement("v-slider", {
      scopedSlots: {
        append: makeSlot(() => createElement('span', 'hello world')),
      }
    }
  }
}

demo

Upvotes: 2

Related Questions