# How to edit a dropdown in Vue Designer

**URL:** <https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247>\
**Category:** Vue Designer\
**Created:** [July 15, 2023, 3:38pm UTC](https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247 "2023-07-15T15:38:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dlnkrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dlnkrg/32/5781_2.png) [@dlnkrg](https://forum.pinegrow.com/u/dlnkrg)\
**Post date:** [July 15, 2023, 3:38pm UTC](https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247/1 "2023-07-15T15:38:07Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/33b3fb55b864d6cfb68c529c6e3c6c75de6ce14a.png)  
 ![VueDesigner](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a40d0b4c0f3b2f19e9a549d56ad7f4b562058d5c.png)

---

<div class="post-metadata">

**Author:** ![Plunky](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/plunky/32/5705_2.png) [@Plunky](https://forum.pinegrow.com/u/Plunky)\
**Post date:** [July 15, 2023, 4:12pm UTC](https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247/2 "2023-07-15T16:12:53Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/63f86d009b23a9fb11bbbe40b5ea25e9f1ada588.png)

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

---

<div class="post-metadata">

**Author:** ![dlnkrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dlnkrg/32/5781_2.png) [@dlnkrg](https://forum.pinegrow.com/u/dlnkrg)\
**Post date:** [July 15, 2023, 4:42pm UTC](https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247/3 "2023-07-15T16:42:33Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [July 16, 2023, 1:32am UTC](https://forum.pinegrow.com/t/how-to-edit-a-dropdown-in-vue-designer/8247/4 "2023-07-16T01:32:39Z")

</div>

Hi @dlnkrg,

Glad you figured it out 👍🏽

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 😉