Adding data dynamically to a Vue.js data function?

Question

Vue.js

Colleagues, does anyone have any ideas or implement someone's idea in the direction of creating one modal window for editing different entities.

To implement the far-fetched, I need to somehow dynamically change the data() object in the component itself https

://github.com/RasankRam/black_list_frontend/b...

--> this.$data[key] = '' because I couldn't find a way to dynamically add data to the object returned by the data() function

Answer 1

A component with a slot and one property, show, is suitable for this task. everything else is pushed from the outside into the slot content of the modal window.
Well, in general - if you want to dynamically add reactive properties - then for this there is https://ru.vuejs.org/v2/api/#Vue-set
for simplicity, you can go down one more level and add properties not of the root object, but of which some of its properties, like

data() {
  return {
    show: false,
    editableObject: {}
  }
}

but, again, for a modal window with arbitrary content, this is not necessary, you need to read about slots