[VueJs2] Fusion du module ressource et carrousel

Par leknoppix, il y a 8 ans

Javascript

Bonjour,

J'ai suivi la formation VueJs de Grafikart et je dois dire que je ne regrette absolument pas.J'ai décidé de fusionner 2 de ces chapitres de sa formation pour un de mes projets.

Ce que je fais

J'ai donc créé un component que je charge dans mon App.vue. Pas de soucis.

<template> <div> <h2>Les actualités</h2> <carousel> <div v-if="loading" class="lightbox__loading"></div> <carousel-slide v-for="(article, n) in articles" :key="n" :index="n-1"> <div class="article" > <h3>{{ article.name }}</h3> <article> <div class="picture"> <img v-bind:src="'https://frequencecountry.mirandais.fr/img' + article.thumb_dir + article.thumb" /> </div> <div class="content" v-html="article.content"></div> </article> </div> </carousel-slide> </carousel> </div> </template> <script> import Carousel from '../Carousel/Carousel' import CarouselSlide from '../Carousel/CarouselSlide' export default { data () { return { slides: 0, articles: [], loading: true } }, components: { Carousel, CarouselSlide }, mounted () { this.loading = true this.$http.get('https://frequencecountry.mirandais.fr/toute-notre-actualite.json').then((response) => { response.json().then((data) => { this.articles = data['posts'] this.slides = data['posts'].length this.loading = false }) }, (response) => { console.log('erreur', response) }).then(_ => { this.loading = false }) } } </script> <style src='./Actu.scss' lang="scss"></style>

Ce que je veux

Je souhaiterais récupérer les différents articles générés en json. Cela fonctionne! En fait ce que je souhaiterais est que les fichiers carousel du tuto fonctionne sur les articles récupérés. En gros, faire une navigation entre chaque slide (1 slide = 1 actu)
Pour les fichiers générants les slides sont exactements ceux de la formation VueJs et fonctionne avec les images (ex de Graikart).
Pour ne pas poluer le topic déjà assez long, vous trouverez les sources correspondantes au carousel, sur mon dépot git (https://framagit.org/leknoppix/MonPlayerRadio)

Ce que j'obtiens

La récupération des articles fonctionnent et s'affiche. Par contre, la navigation entre les slides (articles) ne fonctionnent pas du tout. Je peux passer de la slide 1 vers la 2 mais impossible de faire l'inverse ou de boucler. Là, je ne vois pas du tout comment faire et/ou où est mon erreur!
Si quelqu'un voit mon erreur ou comprend le soucis que j'ai, merci d'avance.

Amicalement
leknoppix

4 réponses

PhiSyX, il y a 8 ans

Yop.
Tu as peut-être oublié (ou mal fait) quelque chose sur son code qui fait que t'as de mauvais index.

Quoi qu'il en soit,
Quand le composant Carousel est monté, la valeur attributé à l'index est l'(index - 1).
Maintenant que tu sais ça, debug ta variable this.slidesCount
Tu comprendras vite pourquoi, ton appli ne fonctionne pas correctement lorsque tu prev/next/goto...

console.log(this.index, this.slidesCount)

leknoppix, il y a 8 ans

Bonsoir

Je viens de refaire une seconde fois le tuto, cela marche avec son code mais dès que je le regroupe avec ressources, cela ne fonctionne pas.
En fait, je comprend le soucis, mon this.$parent.index reste toujours à -1.

Je pense que mon soucis viendrait de cette partie de mon code:

<carousel-slide v-for="(article, n) in articles" :key="n" :index="n+1">

où n commence à 0 et non à 1.
Cela fait pas loin de 2 semaines que je suis sur ce bug, mais là, je ne sais pas, je ne vois pas comment résoudre.

Autre piste, c'est peut-être le fait que mon carrousel-slide, soit généré depuis le mounted, hors, si j'ai ce soucis, je ne vois pas du tout comment outrepasser ce chargement par le mounted.

PhiSyX, il y a 8 ans
<carousel-slide v-for="(article, n) in articles" :key="n" :index="n"> .... watch: { slides (slides) { if (this.index >= this.slidesCount) { this.index = this.slidesCount } } }

Et avec ça, ça ne fonctionne pas?

leknoppix, il y a 8 ans

Bonjour PhiSyX, merci l'erreur était vraiment con, merci beaucoup