vue-select: передача слота опций из компонента grandparent в VueJs

Я использую настраиваемый раскрывающийся компонент vue-select, у него есть опция слота, с помощью которой мы можем настроить вид параметров, как показано в этом документе -> https://vue-select.org/guide/slots.html.

Похожую вещь я хочу добиться, передав слот из дедушкиного компонента. Вот что я пробовал.

App.vue (компонент дедушки и бабушки)

<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 (родительский компонент)

<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>

Я получаю только символ «-» (дефис) в раскрывающемся списке. Данные не проходят через слот.

Как этого добиться?


javascript vue.js vuejs2 vue-select
person was_777    schedule 15.01.2020    source источник
comment
Вероятно, это не решение, но вам нужно указать конструктор (для этого value prop), а не пустой объект.   -  person Yom T.    schedule 15.01.2020
comment
@YomS. Согласен, но value, похоже, не передается в первую очередь как опора. В компоненте @ aniket_777 s Grandparent.   -  person Paul Bovis    schedule 15.01.2020
comment
@Paul Bovis, я оставил value в качестве опоры, чтобы сделать v-model для моего Vue-wrapper   -  person was_777    schedule 16.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

Причина, по которой ваши реквизиты слота не передаются, заключается в том, что вы ничего не привязывали к слоту, чтобы дети могли забрать их. Для этого вам просто нужно добавить v-bind="option", где option - свойство слота самого vue-select компонента:

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>
person Yom T.    schedule 15.01.2020
comment
Идеально! Большое спасибо :) - person was_777; 15.01.2020