Использование v-for для показа динамических слайдов в Vuejs - PullRequest
Новая
       25

Использование v-for для показа динамических слайдов в Vuejs

0 голосов
/ 12 октября 2019

Возникли проблемы с пользовательским компонентом Vue, использующим Vue Carousel (https://ssense.github.io/vue-carousel/) для создания слайда из списка узлов в индексном файле. Некоторые из данных карусели считываются через файл data.json, ноЯ хочу создать новый слайд на основе объекта, содержащего список узлов, поэтому я считаю, что мне нужно v-for, а затем выполнить итерацию по этому объекту, создавая <slide></slide> для каждого экземпляра в списке узлов.

NodeList создан в подключенном () жизненном крючке, но я не уверен, как связать его с компонентом, ТАКЖЕ все еще очень плохо знаком с 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>

1 Ответ

0 голосов
/ 12 октября 2019 
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
        }
      }
    }

}
...