Editable fields

[Akryum]

Fix #74

• Some fields of component local state are editable
• Warning if JSON is invalid
• Edit values inside arrays and objects
• Add items in arrays and objects
• Remove items in arrays and objects
• Edit the full array or object
• Autocomplete special values (maybe they can be formatted with a contenteditable instead of an input)
• Quick Edit for booleans: toggle true/false
• Quick Edit for numbers: +1/-1 (with keyboard modifiers)

More types (RegExp + Dates) can be enabled after #474 is merged

[Akryum]

I added some autocompletion for special JSON values:

[Akryum]

[Akryum]

[Akryum]

[Akryum]

[Akryum]

[crswll]

Dude. Awesome.

[Akryum]

[DannyFeliz]

Dude, this is amazing

[posva]

This is clearly the best one 😄

For the increment/decrement controls on numbers, there are the same problems as with collapse/expand. Control-click won't work in mack, so it should be cmd + click

[posva]

By testing a bit I found this behaviour:

Adding multiple elements to an array adds first undefined, then the special value used for devtools

[Akryum]

This is all fixed! Also, I changed 'Alt' to 'Option' key on Mac for the relevant tooltips.

[gonzaloserrano]

Hi there, I'm using 4.1.4 and I'm not beeing able to edit anything inside the chrome vuex panel. I'm using Vue 2.5.13.

Any hints?

[Akryum]

@gonzaloserrano Vuex state is not editable at this time. This is planned though (and you can open a feature request in another issue 😉).

[gonzaloserrano]

OK, I thought this issue was exactly about implementing this. Thanks for your quick response!

[lloydjatkinson]

Will this be added to Vuex?

[Akryum]

Yes, and it's done: https://github.com/vuejs/vue-devtools/releases/tag/v5.0.0-beta.1