I am familiar with using v-bind:class when returning true or false from a computed function.
I am curious to know if it is possible to use a computed property that matches the ID and value of a button being clicked. For example, clicking button 1 would allow me to retrieve its value and compare it with the data model bound to the input.
Currently, the button's value is synced to a Vue data property.
<label v-bind:class="myBtnClass">
<input type="radio" name="button1" id="button1" value="1" v-model="valueOfBtn"> One
</label>
<label v-bind:class="myBtnClass">
<input type="radio" name="button2" id="button2" value="2" v-model="valueOfBtn"> Two
</label>
new Vue({
el: '#app',
data: {
'valueOfBtn': 1
Having this code snippet only work for one button is not ideal, as I do not want to repeat this block multiple times.
computed: {
myBtnClass: function () {
var result = [];
if (this.valueOfBtn == document.getElementById('button1').value)
{
result.push('primary');
}
return result;
Thank you in advance