在Vuejs中使用v-for显示动态幻灯片
在Vuejs中使用v-for显示动态幻灯片
提问于 2019-10-12 09:06:26
使用Vue Carousel(https://ssense.github.io/vue-carousel/)从索引文件中的节点列表构建幻灯片的自定义Vue组件遇到了一些问题。一些轮播数据是通过data.json文件读入的，但我想基于包含节点列表的对象创建一个新幻灯片。因此，我认为我需要使用v-for，然后遍历该对象，为节点列表中每个实例创建一个<slide></slide>。
NodeList是在挂载()的lifehook中创建的，但是我不确定如何将它绑定到组件上，而且对Vue来说也是非常新的，并且我没有构建这个模板系统。任何帮助都将不胜感激！
import { Carousel, Slide } from 'vue-carousel';
let articles={};
export default {
name: 'ProductCarousel',
props: {
dnode: Object,
value: Object
},
components: {
Carousel,
Slide
},
data() {
return {
carousel: this.dnode,
product: articles
}
},
mounted() {
var _self = this;
var rowName = ".js-ep--" + _self.carousel.anchor;
let e4pRow = document.querySelector(rowName);
var productRows;
if (e4pRow && !window.isEditMode) {
productRows = e4pRow.querySelectorAll(".product-grid");
if (productRows) {
for (var len = productRows.length, i = 0; i < len; i++) {
articles[i] = productRows[i].querySelectorAll("article");
//console.log(articles[i]);
}
//console.log(articles);
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<section :id="carousel.anchor" :class="carousel.classList" >
<h1 v-if="carousel.header" v-text="carousel.header" />
<h2 v-if="carousel.subheader" v-text="carousel.subheader"/>
<p v-if="carousel.paragraphText" v-text="carousel.paragraphText" />
<carousel
:navigationEnabled="carousel.navigation"
:paginationEnabled="carousel.pagination"
:navigationNextLabel="carousel.navigationNextIcon"
:navigationPrevLabel="carousel.navigationPrevIcon"
:navigationClickTargetSize="carousel.arrowClickSize"
:perPageCustom="[
[640, carousel.numSlidesSmall],
[1024, carousel.numSlidesMedium],
[1920, carousel.numSlidesLarge]]">
<slide></slide>
</carousel>
</section>
</template>
Stack Overflow用户
发布于 2019-10-12 13:38:53
import { Carousel, Slide } from 'vue-carousel';
let articles={};
export default {
name: 'ProductCarousel',
props: {
dnode: Object,
value: Object
},
components: {
Carousel,
Slide
},
data() {
return {
carousel: this.dnode,
product: []
}
},
mounted() {
var _self = this;
var rowName = ".js-ep--" + _self.carousel.anchor;
let e4pRow = document.querySelector(rowName);
var productRows;
if (e4pRow && !window.isEditMode) {
productRows = e4pRow.querySelectorAll(".product-grid");
if (productRows) {
for (var len = productRows.length, i = 0; i < len; i++) {
articles[i] = productRows[i].querySelectorAll("article");
//console.log(articles[i]);
}
//console.log(articles);
this.product = articles; //loop through product in your template
}
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58350016
复制相关文章
相似问题
腾讯云开发者
