getSelectedElements typescript issue?

[AmosSzust]

Hi

I did the following in order to delete a selected element

      if (!this.vueFlowInstance) return;
      const selected: ComputedRef<FlowElements> = this.vueFlowInstance.getSelectedElements;
      if (selected.value.length === 0) return;
      const index = this.flowNodes.indexOf(selected.value[0]);
      if (index !== -1) {
        this.flowNodes.splice(index, 1);
      }

Typescript accepts it while developing but in runtime, the data is actually in selected and selected.value is undefined causing the above to fail.

If I do just selected.length === 0 obviously typescript doesn't accept it, telling me

Property 'length' does not exist on type 'ComputedRef'

What am I missing?

[bcakmakoglu]

Can you provide a reproduction for this issue?

You can find a sandbox template here.

I recommend you start using composition API instead of options API, though that is ultimately your choice of course but you'll make your life easier in the future 😄

[bcakmakoglu]

A lot of things from the code you previously showed suggests that you were not using composition API (aside from the fact that you literally asked me what composition API even is 😂) - mainly using this.
There's no this in a setup function.

Aside from that, if you're already in a setup function, use the instance straight from useVueFlow.

const { getSelectedNodes } = useVueFlow();

console.log(getSelectedNodes.value)

That should resolve your type issue.

[AmosSzust]

I guess I did a mix between the 2. Anyway, now I did it correctly and the problem is that both getSelectedNodes and getSelectedEdges are empty even when I select a node/connection line.

    function deleteSelected1() {
      const { getSelectedNodes, getSelectedEdges } = useVueFlow();
      const selectedNodes = getSelectedNodes.value;
      const selectedEdges = getSelectedEdges.value;
      if (selectedNodes.length) {
        useVueFlow().removeNodes(selectedNodes);
      }
      if (selectedEdges.length) {
        useVueFlow().removeEdges(selectedEdges);
      }
    }

[AmosSzust]

Here is my sandbox example, click the "to delete" node to make sure it is selected and press the test button at the top. Let me know what am I missing.
https://codesandbox.io/p/devbox/eloquent-golick-2grnlp?file=%2Fsrc%2FApp.vue%3A13%2C48

[bcakmakoglu]

General rule of thumb: Composable are not meant to be used in callbacks / functions.
There are exceptions (since composables are ultimately just functions) but useVueFlow is not one of them.
It's similar to React Hooks (but more flexible).

Call the composable in the setup body of your component (you can use any example on the vueflow docs as a reference to see how it's correctly used).

<script setup lang="ts">
const { getSelectedNodes, getSelectedEdges } = useVueFlow()

function deleteSelectedElements() {
	if (getSelectedNodes.value.length) { /* ... */ }
	// ...
}

Or if you want to use defineComponent:

export default defineComponent({
	setup() {
		const { getSelectedNodes, getSelectedEdges } = useVueFlow()

		function deleteSelectedElements() {
			if (getSelectedNodes.value.length) { /* ... */ }
			// ...
		}	
	}
})

Please don't misunderstand me or take this the wrong way but these are fundamentals of the Vue Composition API and it's got nothing to do with Vue Flow 😄 Sure I could start throwing errors for incorrect usage (which I will in the future so you can't keep calling useVueFlow in a context where it's invalid to call it to begin with) but atm it doesn't, which isn't super beginner friendly and expects you to know how composables are supposed to work.

To explain why using useVueFlow isn't gonna work in a callback.

When you call useVueFlow what happens under the hood is:

1. Vue Flow will check the current context if a state can be found (an id will be written to currentInstance, which usually is the component that called useVueFlow.
2. If no state can be found from the context and no id was explicitly passed to useVueFlow, a new state will be created (and a new id for this state created and, if possible, written to the context)

During your function execution of deleteSelected1 there is no instance to find the state from - getCurrentInstance() (which is a Vue built-in function) will not return the component instance so we can check if a state is available so you just generate a new state constantly.

You can confirm this yourself by using this modified sandbox.

As you can see, everytime you press the Test button, you will receive an alert with a new id.