'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 |
|---|
