Re-rendering Vue component

Question

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.

"it is no longer the <plasmid> tag but an svg component" What does this mean? Can you show your code? — thanksd
– thanksd, Commented Jun 7, 2017 at 18:23
@thanksd sure, I tried to make it as explicit as possible: pastebin.com/KPjiTuDQ — asselinpaul
– asselinpaul, Commented Jun 7, 2017 at 18:28
Could you append the svg to the plasmid tag rather than replace/transform it? — jaredsk
– jaredsk, Commented Jun 8, 2017 at 4:10
@jaredsk not easily from what I've glanced, ideally I would be able to ask Vue.js to re-render that component, since it would re-generate the appropriate markup before being rendered by the external library — asselinpaul
– asselinpaul, Commented Jun 8, 2017 at 10:24

Kristian · Accepted Answer · 2017-06-08 10:59:43Z

2

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.

answered Jun 8, 2017 at 10:59

Kristian

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

jaredsk Over a year ago

@asselinpaul this is about what I had in mind. Try using a watcher.

Collectives™ on Stack Overflow

Re-rendering Vue component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related