I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales.
One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I had the idea of alternating between white and grey rows.
My question is: how can I achieve this in Vue?
I attempted the following approach, however, it did not yield the desired result (I have omitted the li items for simplicity):
<li v-for="fruit in fruits" v-bind:key="fruit.id" :style="{backgroundColor: color}" v-bind="counter++">
</li>
Below is my Vue instance code snippet:
export default {
data() {
return {
color: '',
counter: 0,
fruits: ["Lorem ipsum", "Lorem ipsum", "Lorem ipsum", "Lorem ipsum"]
}
}, methods: {
choseColor() {
if (this.counter % 2 !== 0 ) {
color = 'grey'
} else {
color = 'white'
}
}
}
}