再レンダリングVueのコンポーネント

Question

私は私の.vueテンプレートでこのようなものを持っている：

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

私はsequencelength属性を操作するためVue.jsを使用して、SVGを作成することを操作するコードの一部を追加素子。

sequenceLengthが変更された場合、Vueはもはや<plasmid>タグではなくsvgコンポーネントであるため、ビューを更新しません。

したがって、コンポーネントを再レンダリングする必要があります。私の使用しようとしている$forceUpdate()は機能しませんでした。

Answer 1

<plasmid>がVueコンポーネントの場合は、その中にsvgグラフィックスを描画するメソッドが必要です。drawPlasmid()としましょう。今度は、sequenceLengthが変更されたときにこのメソッドをトリガーする必要があります。私は、これは正しい軌道に乗ってあなたを置く願ってい

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

：

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

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

またはウォッチャー：あなたは、どちらかのイベントハンドラでそれを行うことができます。