Within my Vue application code, there is a swiper component. Inside this component, I am using a v-for and a slot.
I am facing an issue in the parent component (Foo) where I need to access the component (baz) I inserted into the slot using a ref. However, it only returns a single element instead of an array as I expected.
Is there a way to maintain this structure of components and still receive the array I was anticipating? Is it even possible?
import Vue from "vue";
Vue.config.productionTip = false;
const Foo = {
template: `
<div>
<swiper :items="items">
<baz ref="baz"/>
</swiper>
</div>
`,
data: function() {
return {
items: [1, 2, 3, 4, 5]
};
},
mounted: function() {
this.$nextTick().then(() => {
console.log({ refs: this.$refs.baz });
});
}
};
const Baz = { template: "<div>im baz</div>" };
const Swiper = {
template: `
<div class="swiper">
<div v-for="(item, i) in items" :key="i">
<slot></slot>
</div>
</div>
`,
props: ["items"]
};
Vue.component("foo", Foo);
Vue.component("baz", Baz);
Vue.component("swiper", Swiper);
new Vue({
render: h => h(Foo)
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>