The display and hiding of arrows at both ends cannot be controlled after edges are generated using the addEdges method

[guminlianren]

The three questions you asked, did I answer this question clearly?
1、I want to have the freedom to show and hide the arrows on either side of these edges
2、I tried modifying the type property in markerEnd and markerStart, but found that changing the type did not have any effect, although changes to the color and size of the arrowheads were effective. I was able to change the type from arrow to ArrowClosed and see the effects.
I used VueFlowRef.value.updateEdgeData(edge.id, () => ({ markerEnd, markerStart })); to update the edge data.
Even when I modified markerEnd's type in the addEdges call like this:
addEdges({
markerEnd: {
type: 'arrow',
}
})
the markerEnd arrow still appeared on the canvas even after I changed its type.

[bcakmakoglu]

VueFlowRef.value.updateEdgeData(edge.id, () => ({ markerEnd, markerStart }));

is not a valid way to change an edges marker, because markers are not part of edge.data.

addEdges({
	markerEnd: {
	type: 'arrow',
	}
})

is also not a valid edge so this won't work either.

Here's an example on how to do it correctly.

[bcakmakoglu]

Be aware that if you use a custom edge, you will receive a prop called markerEnd which is not an object but a string with a reference to a marker element.
You have to forward this string to a path element.

For example:

<script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  sourceX: {
    type: Number,
    required: true,
  },
  sourceY: {
    type: Number,
    required: true,
  },
  targetX: {
    type: Number,
    required: true,
  },
  targetY: {
    type: Number,
    required: true,
  },
  sourcePosition: {
    type: String,
    required: true,
  },
  targetPosition: {
    type: String,
    required: true,
  },
  markerEnd: {
    type: String,
    required: false,
  },
})

const path = computed(() => getBezierPath(props))
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :id="id" :path="path[0]" :marker-end="markerEnd" />
</template>

[guminlianren]

I'm sorry for taking up so much of your time and I only have RMB to offer as thanks. (┬┬﹏┬┬)

I forgot that I had written the line as a template, which caused the markerStart not to appear.
I've figured out the solution to the problem. I can control the visibility of the arrow by setting the width of the marker to 0. This does work effectively. edge.markerStart.width = 0;
edge.markerEnd.width = 0;

[bcakmakoglu]

No worries! I am glad to help and respond to questions, you are always welcome to ask questions.
Don't misunderstand me in my previous post.
Just be a little considerate that I do this in my own free time, so help me out with as much information as possible whenever you have a question; That way I can respond quickly too ^^