Vue-devtools: Would love editable props

[ericcirone]

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]

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

[ericcirone]

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

[emanuelmutschlechner]

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]

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

[emanuelmutschlechner]

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

[gabrielstuff]

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

[geocine]

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]

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.

[jamyspencer]

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