How to edit a dropdown in Vue Designer

Vue Designer
1

Hey Friends.

I recently got my hands on the vue designer. I like it alot, it helps me learn to get into vue.
I just have a small issue that i dont seem to be able to figure out.

I have used a Navbar from Tailwind Ui that uses a dropdown component.
The Dropdown seems to be implemented using the scripts tag and i can only edit part of it using the code editor.

Is there a way to open the dropdown in the editor and edit it manually instead of working from the code editor?

You can see in the screenshots i attached, i can open the dropdown in the browser just fine, but i am unable to open it in the Editor.

Hope you can help me out.
Cheers!
Daniel

VueDesigner2
VueDesigner21914Ă—987 77.7 KB

VueDesigner
VueDesigner2550Ă—1387 170 KB

2

image
image2550Ă—1387 143 KB

Click on the hand icon to switch to “interactive mode”

1 Like
3

Hmm i could swear that didnt work for me yesterday, But it works.

Is there a way to edit dynamic elements tho? It just says i cant edit is as it is dynamic.

Edit: NVM i have to edit the component itself, i was editing the index.

Thank you!

4

Hi @dlnkrg,

Glad you figured it out :+1:t4:

You will have to use the test-click button to open such dropdowns, and once it’s open, turn off test-click button, so that you can edit the dropdown’s markup.

Note, for such quick ones, instead of toggling the test-click button, you can simply press the Alt key and click on your page view to open the dropdown.

Whether you can edit the items in the dropdown depends on whether that data is maintained as a state (as an array) and v-for’ed, or if its directly added to the markup.

Also, you can hide the dynamic-elements-can’t-be edited warning from the menu - Vue → Hide dynamic… if you find it annoying.

Let me know if you have further questions. Happy Vue Designing :wink:

3 Likes