How to Update Annotation Template Dynamically in Vue Diagram?

In Syncfusion® Vue Diagram , you can change the annotation template at runtime for connectors. Here’s how to define and update the annotation template dynamically:

1. How to Define the Connector with Annotation Template
First, define the connector with an annotation. The annotation will have a template that you can update later. Refer to the below code-snippet on how to define the template annotation.

let connectors = [
   {
       id: 'connector1',
       sourcePoint: { x: 200, y: 300 },
       targetPoint: { x: 200, y: 200 },
       annotations: [
         {
           id: 'label1',
           height: 10,
           width: 20,
           offset: 0.5,
           template:
             '<div><img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Minus.svg/1200px-Minus.svg.png" height = "35" weight = "60"/></div>',
         },
       ],
     }, 
]; 

2. How to Change the Template at Runtime

To change the connector annotation template at runtime, here we have used button to trigger the update. You simply set the desired template to the annotations template property of the connector and call diagram.dataBind() to refresh the diagram.

Here’s the code snippet to change the annotation at runtime:

<template>
 <div class="control-section">
   <button @click="changeTemplate">change Template</button>
 </div>
</template> 

methods: {
   changeTemplate() {
     diagramInstance.connectors[6].annotations[0].template =
       '<div><input type="button" value="button"></div>';
   },
 }, 

Sample

Conclusion
I hope you enjoyed learning how to update the annotation template dynamically in Vue Diagram.
You can refer to our Vue Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!