[Vuejs]-Focus state remains after DOM element is updated

by

0👍

I solved this by forcing Vue to re-render the button element.

This makes sense in my context, as I want the button to behave as a new button and not have any previous ‘focus’ applied to it.

This can be achieved by setting the :key attribute on the button.

 <button v-on:click="nextText()" :key="index" class="button is-primary is-outlined">{{ options[index].text }}</button>

Updated code below.

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/bulma@0.9.3/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()" :key="index" class="button is-primary is-outlined">{{ options[index].text }}</button>
</div>

Leave a comment