重新渲染 Vue 组件答案

【问题标题】：Re-rendering Vue component重新渲染 Vue 组件
【发布时间】：2017-11-09 05:55:28
【问题描述】：

我的 .vue 模板中有这样的内容：

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

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

现在当sequenceLength 改变时，Vue 不会更新视图，因为它不再是<plasmid> 标签而是一个svg 组件。

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

【问题讨论】：

"它不再是标签而是一个 svg 组件" 这是什么意思？你能展示你的代码吗？
@thanksd 当然，我试图让它尽可能明确：pastebin.com/KPjiTuDQ
能否将 svg 附加到质粒标签而不是替换/转换它？
@jaredsk 从我所看到的情况来看并不容易，理想情况下，我可以要求 Vue.js 重新渲染该组件，因为它会在被渲染之前重新生成适当的标记外部库

标签： vue.js vuejs2 vue-component

【解决方案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)
  }
}

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

【讨论】：

@asselinpaul 这就是我的想法。尝试使用观察者。