Skip to content

Would love editable props #669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ericcirone opened this issue Apr 20, 2018 · 11 comments
Closed

Would love editable props #669

ericcirone opened this issue Apr 20, 2018 · 11 comments

Comments

@ericcirone
Copy link

What problem does this feature solve?

Lot's of times I would like to see quick changes when a prop is changed, but most of the time the props getting sent in are hard coded. I would love to be able to change props on the fly as well as data.

What does the proposed API look like?

Make props editable the same way that data is editable.

@lehos
Copy link

lehos commented Apr 20, 2018

уоu can edit data (which is passed as prop to your component) in parent component.

@ericcirone
Copy link
Author

I understand that, but most of the time i'm not setting those props with a variable from data.

@emanuelmutschlechner
Copy link
Contributor

I think editing props shouldn't be added as a feature to devtools because following warning will be thrown every time:

[Vue warn]: Avoid mutating a prop directly since the value will be 
overwritten whenever the parent component re-renders. Instead, 
use a data or computed property based on the prop's value.

But feel free to test it yourself
chrome.zip

  1. Download and extract chrome.zip to chrome
  2. Open Chrome extension page
  3. Check "developer mode"
  4. Click "load unpacked extension", and choose chrome.

@cannap
Copy link

cannap commented Apr 23, 2018

maybe as an option? :D
"Enable Prop manipulation*"
or something

@emanuelmutschlechner
Copy link
Contributor

@cannap We'll have to wait until we have the settings tab #547

@gabrielstuff
Copy link

@emanuelmutschlechner what are the plan for #547, it actually looks pretty dead.

@geocine
Copy link

geocine commented Jan 17, 2019

This is an interesting feature so we could directly test an individual component is behaving correctly when a prop is changed just like how we could manipulate an attribute of a Web Component.

@mattaningram
Copy link

This would be very useful for me since I often need to inspect the styling of a dropdown in dev tools but it closes when I click anywhere. I need to be able to switch a true/false prop to keep it open.

Akryum pushed a commit that referenced this issue Feb 3, 2019
* feat: Make props editable

* feat: switch in settings
simsim0709 pushed a commit to simsim0709/vue-devtools that referenced this issue May 7, 2019
* feat: Make props editable

* feat: switch in settings
@jamyspencer
Copy link

This is a great feature, I just used it for testing a component I'm making. Thanks for adding it :)

@noalbalint
Copy link

is it possible there's been regression on this feature? I'm unable to edit props in 2022

Screen.Recording.2022-07-21.at.11.56.25.AM.mov

@cannap
Copy link

cannap commented Jul 21, 2022

is it possible there's been regression on this feature? I'm unable to edit props in 2022

Screen.Recording.2022-07-21.at.11.56.25.AM.mov

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants