CODEWITHSUNDEEP
vue.jsvuejs2vue-component
asselinpaul
asselinpaul

Reputation: 386

Re-rendering Vue component

I have something like this in my .vue template:

<plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">

I use Vue.js to manipulate the sequencelength attribute and then add a piece of code that manipulates that to create an svg element.

Now when sequenceLength changes, Vue doesn't update the view because it is no longer the <plasmid> tag but an svg component.

I therefore need to re-render the component, my attempts to use $forceUpdate() have not worked.

Upvotes: 1

Views: 805

Answers (1)

Kristian
Kristian

Reputation: 21

If <plasmid> is your Vue component, inside it you should have a method that draws your svg graphics, let's call it drawPlasmid(). Now, you have to trigger this method whenever sequenceLength is changed. You can do it either with an event handler:

<template>
  <div @change-sequence-length=changeSequenceLength"></div>
</template>

<script>
  methods: {
    changeSequenceLength(e) {
      this.drawPlasmid(e.detail.sequenceLength)
    }
    drawPlasmid(sequenceLength) {
      // Render svg graphics
    }
  }
<script>

or a watcher:

watch: {
  sequenceLength: function() {
    this.drawPlasmid(this.sequenceLength)
  }
}

I hope this puts you on the right track.

Upvotes: 2

Related Questions