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

0
votes

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?

1
javascriptvue.jsvuejs2vue-select
Probably not the solution, but you need to specify a constructor (for this value prop) rather than an empty object. – Yom T.
@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
@Paul Bovis, the reason I kept value as a prop is to make v-model for my Vue-wrapper – was_777

1 Answers

1
votes

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>