Changer backgroundImage au click

Arnaud_mrlbrd
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

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.