[Vuejs]-V-once rendered twice on a template

by

0👍

✅

v-once works differently from how you expect it to behave. It does not only append some element once to the dom! What v-once does instead is render the template of a sepcific component only once, the vue documentation says:

On subsequent re-renders, the element/component and all its children
will be treated as static content and skipped. This can be used to
optimize update performance.

However this is not a re-render of the same element and it doesn’t stop the implemenation of your b-modal to be appended to the dom mulitple times.

A possible workaround I would suggest is using a variable in your parent’s component data to determine wether the modal has been opened and trigger it with a method on the button, like so:

  <template slot="action" slot-scope="data">
     <b-btn @click="openModal" variant="primary">View</b-btn>

      <b-modal :active.sync="isOpen" size="lg" title="View Surat">
        <p class="my-2">View Surat</p>
      </b-modal>
  </template>

And in your component:

data() {
   return {
     // your other data
     isOpen: false
   }
},
methods: {
  openModal () {
    this.isOpen = true
   }
}

To be fair I haven’t tested this in a life project but from what the buefy documentation says, this should give you the expected behaviour.

Leave a comment