Imagine we have 5 identical buttons. Instead of duplicating them, I decided to make use of v-for.
methods: {
a() {},
b() {},
...
}
Replacing the individual buttons with:
<v-btn block color="primary" class="my-1" @click="a">A</v-btn>
<v-btn block color="primary" class="my-1" @click="b">B</v-btn>
<v-btn block color="primary" class="my-1" @click="c">C</v-btn>
<v-btn block color="primary" class="my-1" @click="d">D</v-btn>
<v-btn block color="primary" class="my-1" @click="e">E</v-btn>
Using:
<v-btn v-for="(button, index) in buttons" :key="index"
block color="primary" class="my-1"
@click="button.click">{{button.text}}
</v-btn>
buttons: [
{ click: this.a, text: "A"},
{ click: this.b, text: "B"},
{ click: this.c, text: "C"},
{ click: this.d, text: "D"},
{ click: this.e, text: "E"},
]
The expected functionality works, but when rendering the buttons object, something seems off. Why are the clicks not registering?
[ { "text": "A" }, { "text": "B" }, { "text": "C" }, { "text": "D" }, { "text": "E" } ]Lets take it further and add a button with dynamic text (another data field)
boolean: true F: "data1" f() {boolean ? this.F = "data1" : "data2"} <v-btn block color="primary" class="my-1" @click="F">{{F}}</v-btn>
This time, the result is:
[ { "text": "A" }, { "text": "B" }, { "text": "C" }, { "text": "D" }, { "text": "E" }, {} ]
The button text doesn't update, even though {{F}} shows the changes.
- What might be causing this issue, and how can we tackle similar situations?
I attempted to create a method like setButtons to return an updated buttons array, yet when the data changes such as 'F', the object isn't refreshed accordingly.