otf: add data attributes and pass them in vue component

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue

@@ -1,8 +1,9 @@
 <template>
     <on-the-fly
-        action="action"
+        :type="context.type"
-        :type="type"
+        :id="context.id"
-        :id="id"
+        :action="context.action"
+        :buttonText="options.buttonText"
         @saveFormOnTheFly="saveFormOnTheFly">
     </on-the-fly>
 </template>
@@ -22,16 +23,6 @@ export default {
         },
         options() {
             return this.onTheFly.options;
-        },
-        // temp
-        action() {
-            return 'show';  // 'edit', 'create'
-        },
-        type() {
-            return 'person'; // 'thirdparty'
-        },
-        id() {
-            return 1613
         }
     },
     mounted() {

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/index.js

@@ -14,8 +14,14 @@ containers.forEach((container) => {
         data() {
             return {
                 onTheFly: {
-                    context: {},
+                    context: {
-                    options: {}
+                        action:  container.dataset.action,
+                        type:  container.dataset.targetName,
+                        id: parseInt(container.dataset.targetId),
+                    },
+                    options: {
+                        buttonText: container.dataset.buttonText || null
+                    }
                 }
             }
         }

src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig

@@ -3,10 +3,19 @@
     It push all variables from context in OnTheFly/App.vue.
 
     OPTIONS
-    *
+    * targetEntity  {
+          name:     string  'person', 'thirdparty'
+          id:       integer
+      }
+    * action        'show', 'edit', 'create'
+
 #}
 <div class="onthefly-container"
 
+     data-target-name="{{ targetEntity.name|e('html_attr') }}"
+     data-target-id="{{ targetEntity.id|e('html_attr') }}"
+     data-action="{{ action|e('html_attr') }}"
+
 ></div>
 
 {{ encore_entry_script_tags('vue_onthefly') }}