Question

使用Vue Carousel（https://ssense.github.io/vue-carousel/）从索引文件中的节点列表构建幻灯片时，自定义Vue组件遇到了一些麻烦。某些轮播数据是通过data.json文件读取的，但是我想基于包含节点列表的对象创建新的幻灯片。因此，我相信我需要v-for，然后遍历该对象，为节点列表中的每个实例创建一个<slide></slide>。

NodeList是在mount（）生命周期中创建的，但是我不确定如何将其绑定到组件，而且对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>

Answer 1

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

}

使用v-for在Vuejs中显示动态幻灯片

1 个答案: