0

I am using custom dropdown component 'vue-select', it has a slot option through which we can customize the options view as shown in this document -> https://vue-select.org/guide/slots.html

Similar thing I want to achieve it by passing a slot from grandparent component. Here is what I have tried.

App.vue(Grandparent component)

<template>
  <div id="app">
    <v-select-wrapper v-model="selectedData" :options-data="[{
        id:1,
        label: 'New York'
      }, {
        id:2,
        label : 'London'
      }]">
      <template v-slot:option-data="option">
        {{option.id}} -
        {{ option.label }}
      </template>
    </v-select-wrapper>
  </div>
</template>

VSelectWrapper.vue(Parent component)

<template>
  <v-select :options="optionsData" :value="value" @input="inputChanged">

    <template v-slot:option="option">
      <slot name="option-data"/>
    </template>
  </v-select>
</template>

<script>
  import vSelect from "vue-select";

  export default {
    name: "VSelectWrapper",
    components: {
      vSelect
    },
    props: {
      optionsData: {type: Array},
      value: {}
    },
    methods: {
      inputChanged(val) {
        this.$emit("input", val);
      }
    }
  };
</script>

The output I receive is only '-'(hyphen) character in dropdown option. The data is not getting passed through the slot.

How can it be achieved?

was_777
  • 599
  • 1
  • 9
  • 28
  • Probably not the solution, but you need to specify a constructor (for this `value` prop) rather than an empty object. – Yom T. Jan 15 '20 at 18:46
  • @YomS. Agreed, but `value` doesn't seem to be passed down as a prop in the first place. In @aniket_777 s Grandparent component. – Paul Bovis Jan 15 '20 at 19:01
  • @Paul Bovis, the reason I kept `value` as a prop is to make `v-model` for my Vue-wrapper – was_777 Jan 16 '20 at 02:10

1 Answers1

2

The reason your slot props are not passed down is because you did not bind anything on the slot to pick up from by the children. To do so, you simply need to add v-bind="option" where option is the slot property of the vue-select component itself:

VSelectWrapper.vue

<v-select
  :options="optionsData"
  :value="value"
  @input="inputChanged">
  <template v-slot:option="option">
    <slot name="option-data" v-bind="option"></slot>
  </template>
</v-select>
Yom T.
  • 8,760
  • 2
  • 32
  • 49