vue-select : Passing option slot from grandparent component in VueJs

Question

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?

Answer 1

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>