Области действия слота Vue в цикле for

У меня есть несколько слотов в цикле v-for, как показано ниже. Вместо того, чтобы привязывать мои данные для каждого слота, есть ли способ привязать эти данные ко всем слотам в цикле v-for?

<div class = "vehicle-listing" v-for = "(vehicle, index) in vehicles" :key = "vehicle.id ? vehicle.id : 'undefined'+index">

    <div class = "vehicle-listing__image">
        <slot name = "listing-image" v-bind:vehicle = "vehicle">
            Default content
        </slot>
    </div>

    <div class = "vehicle-listing__title">
        <slot name = "listing-title" v-bind:vehicle = "vehicle">
            <slot name = "listing-title__header" v-bind:vehicle = "vehicle">
                Default content
            </slot>
            <slot name = "listing-title__subtitle" v-bind:vehicle = "vehicle">
                Default content
            </slot>
            <slot name = "listing-title__price" v-bind:vehicle = "vehicle">
                Default content
            </slot>
            <slot name = "listing-title__favourites" v-bind:vehicle = "vehicle">
               Default content
            </slot>
        </slot>
    </div>

    <div class = "vehicle-listing__summary">
        <slot name = "listing-summary" v-bind:vehicle = "vehicle">
            Default content
        </slot>
    </div>

    <div class = "vehicle-listing__finance">
        <slot name = "listing-finance" v-bind:vehicle = "vehicle">
            Default content
        </slot>
    </div>

    <div class = "vehicle-listing__info">
        <slot name = "listing-info" v-bind:vehicle = "vehicle">
           Default content
        </slot>
    </div>

    <div class = "vehicle-listing__location">
        <slot name = "listing-location" v-bind:vehicle = "vehicle">
           Default content
        </slot>
    </div>

    <div class = "vehicle-listing__button-block">
        <slot name = "listing-cta" v-bind:vehicle = "vehicle">
           Default content
        </slot>
    </div>

</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 604
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Другие вопросы по теме