Vue.js 重新渲染Vue组件

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

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

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

现在，当

sequenceLength

更改时，Vue不会更新视图，因为它不再是

标记，而是svg组件

因此，我需要重新渲染该组件，我尝试使用

$forceUpdate（）

的尝试没有成功。

如果

是您的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>

---

我希望这能让您走上正轨。

“它不再是标签，而是svg组件”这意味着什么？你能展示你的代码吗？@thanksd当然，我试着让它尽可能明确：你能把svg附加到质粒标签上而不是替换/转换它吗？@jaredsk从我所看到的不容易，理想的情况是我能要求Vue.js重新呈现该组件，因为它将在外部程序呈现之前重新生成适当的标记library@asselinpaul这就是我的想法。尝试使用观察者。

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