Как использовать переменную v-for из слота в родительском компоненте?

Question

Как решить эту ошибку, когда я пытаюсь использовать переменную в slot из v-for в Vue.js?

Свойство или метод "slide" не определен в экземпляре, но на него ссылаютсяво время рендера.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство

. Вот как я использую компонент:

<Slides v-model="slides">
  <AnotherComponent v-model="slide.someproperty" />

В Slides компоненте у меня есть v-for:

<div v-for="(slide, index) in value" :key="slide.id">
        <comp1 v-model="slide.prop1"></dropper>
        <slot></slot>
</div>

Answer 1

Это именно то, для чего предназначены слоты с областью действия .

Например, в вашем Slides шаблоне

<slot :slide="slide"></slot>

и в родительском ...

<Slides v-model="slides">
  <AnotherComponent slot-scope="{ slide }" v-model="slide.someproperty"/>

---

Примечание. При использовании Vue <2.5 можно использовать <code>slot-scope только для элемента <template>.