Changer backgroundImage au click

Par Arnaud_mrlbrd, il y a 4 ans

Javascript VueJS

Bonjour,
J'aimerai avoir une sorte de slider mais pas vraiment un slider.
Voici mon composent :

<div class="element--container"> <fa icon="chevron-left" @click="decrement" /> <div class="imageContainer" id="imageContainer"></div> <fa icon="chevron-right" @click="increment" /> </div>

Je récupére un tableau qui contient des objects avec à l'intérieur l'url de l'image a mettre en background. Ca en soit c'est ok mais j'arrive pas à faire que au click soit sur 'chevron-left' ou sur 'chevron-right' ce soit l'image de l'object suivant du tableau.

Je récupére mes donnés de mon array comme ça :

setup() { class Elements { constructor (_id, name, image) { this._id = _id this.name = name this.image = image } } let dataElements = ref([]) const makeDataElements = () => { for (const elem of dbElements) { const new_elem = new Elements(elem._id, elem.name, elem.image) dataElements.value.push(new_elem) } } onMounted(makeDataElements); //Return return { dataElements, } }

Sauf que après je veux passer sur une méthode qui prend l'id suivant dans le tableau
dataElements.value[id++].image
Sauf que j'ai une erreur ; 'dataElements' is not defined no-undef

1 réponse

Ascetik, il y a 4 ans

Bonjour,
Si j'ai bien compris ce que tu veux faire, c'est à dire faire défiler tes images en cliquant sur gauche et droite. Il te faut un pointeur, c'est à dire une propriété qui stocke l'index courant du tableau dataElements.
Je suppose que tes éléments sont, comme on dit en typescript, un tableau Elements[]. Puisque c'est un tableau, il y a un index par valeur. C'est cet index qu'il faut bouger.
<script setup>
// import blabla
// import machin
// dommage que tu n'utilises pas typescript

const dataElements = []; // même pas besoin de ref
// fetch(trucmuch).then(pan! => v'la l'tableau! et on le colle dans dataElements)

const index = ref(0);

const currentImage = computed(()=> dataElements.value[index.value])

function increment(){
index.value++;
}
function decrement(){
index.value--;
}
<template>
<div class="element--container">
<fa icon="chevron-left" @click="decrement" />
<div class="image-container" :id="image-container-${index}" :style="background-image: url(${ currentImage})"></div>
<fa icon="chevron-right" @click="increment" />
</div>
</ template>

<style>

</ style>

Je n'ai mis aucun contrôle sur index. Il va de soi que si index se retrouve plus grand que dataElements.length, il faut le repasser à 0. Pareillement à l'inverse. C'est du js de base, je te laisse faire.