vl-interaction-draw toggle on/off

[Rih]

hi @ghettovoice thank you for your previous reply. I have a question, I'm stuck in the way you turn off/on vl-interaction-draw with v-if based on the demo, I think I didn't changed that much, but it crashed when I try to disabled it Its a vue issue but if you can tell me some guidelines how to solve it please?

Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at Object.insertBefore (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5699:14)

Actually the coded changed like this:

        <vl-source-vector ident="draw-target" :features.sync="drawnFeatures"></vl-source-vector>
      </vl-layer-vector> ```
and draw is:
        ```<vl-interaction-draw v-if="isDrawEnabled && drawType !== undefined" source="draw-target" :type="drawType" 
        v-on:drawstart="drawStart" v-on:drawend="drawEnd" >
      </vl-interaction-draw>```
And isDrawEnabled is similar with the condition mapPanel.tab === 'draw' (checking some variables) and drawType is the same, both uses vuex store variables and It changes by a dispatched action in other components.
Thank you in advance!

[ghettovoice]

Hello @Rih , very strange error. I can't reproduce it, several times tried.

Anyway there can be a bit more efficient way to do it. Instead of using v-if you can use:

• <vl-interaction-draw :active="boolProp" ... /> - active is a property for any interaction component. enable/disable interaction
• <vl-layer-vector id="draw-pane" :visible="boolProp">...</vl-layer-vector> - visible is a property of any layer component. toggles layer visibility.

Switching this properties are more efficient because you avoid instant re-creation of components and underlying openlayers objects

[Rih]

hello @ghettovoice Yeah it is, I figure out that I changed the variable into a local data instead of a store data (vuex) solved the issue, I think it is a vue life-cycle issue when re-render. Anyways, thank you, the workaround (not efficient btw) was using the updated() func to sync my local variable with the stored variable