'vuejs 3 - change background image url on click

I need your held because I don't understand how to do it with vuejs.

I have a very simple element :

    <div>
        <button @click="decrement" >
            prev
        </button>

        <div class="imageContainer" ></div>

        <button @click="increment">
            next
        </button>
    </div>

I import a js array with objects that contains the url of the images. After I want at click on 'decrement' or 'increment' change url. I have try this :

export default {
    data() {
        return {
            shoesId: 0,
        }
    },
    methods: {
        increment() {
            this.shoesId++
            // backgroundImage: `url(${dataShoes[this.shoesId]})`
        },
        decrement() {
            this.shoesId--
            // backgroundImage: `url(${dataShoes[this.shoesId]})`
        },
    },
    setup() {
        class Element {
            constructor (_id, name, image) {
                this._id = _id
                this.name = name
                this.image = image
            }
        }

        let dataElements = ref([])

        const makeDataElements = () => {

            for (const element of dbElements) {
                const new_element = new Element (element._id, element.name, element.image)
                dataElements.value.push(new_element)
            }
            // the values are indeed incremented
        }

        onMounted(makeDataElements);

        //Return
        return {
            dataElements,
        }
    },
}

But if I want use "dataElements" I have an error : error 'dataElements' is not defined no-undef



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source