Question

我的.vue模板中有类似的内容：

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

我使用Vue.js来操作sequencelength属性，然后添加一段代码来操作它来创建一个svg元素。

现在sequenceLength发生更改时，Vue不会更新视图，因为它不再是<plasmid>标记，而是svg组件。

因此我需要重新渲染组件，我使用$forceUpdate()的尝试没有用。

Answer 1

如果<plasmid>是你的Vue组件，你应该有一个方法来绘制你的svg图形，我们称之为drawPlasmid()。现在，只要sequenceLength发生更改，就必须触发此方法。您可以使用事件处理程序执行此操作：

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

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

或观察者：

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

我希望这会让你走上正轨。

重新渲染Vue组件

1 个答案: