I am currently utilizing Vue along with Bulma.
My challenge lies in updating the DOM upon a button click event. Even after the update, the button still retains its focus state.
I aim to have the updated button without the focus state. What would be the most effective approach to tackle this issue? Is there a more conventional way within Vue.js to address this common scenario?
Find below a simplified example:
var app = new Vue({
el: '#app',
data: {
options: [{
text: "This is the first text"
}, {
text: "This is the second text"
}, {
text: "This is the third text"
}],
index: 0,
},
methods: {
nextText: function() {
if (this.index < this.options.length - 1) {
this.index++;
} else {
this.index = 0;
}
}
}
})<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1c6dfded2f3839d8a9d80">[email protected]</a>/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button v-on:click="nextText()" class="button is-primary is-outlined">{{ options[index].text }}</button>
</div>