Vue.js Inpost kod js - wybór paczkomatu

Hej, chcę umieścić widget Inpost (wybór paczkomatu) na stronie (w komponencie) Vue.js . Wie ktoś może jak to zrobić?
Tak wygląda mój kod którego używam poza Vue.js

<input id="address_details_inpost" type="hidden" value=""
                                               name="address_details_inpost">
                                        <input id="inpost_name" type="hidden" value="" name="inpost_name">
                                        <input id="inpost_description" type="hidden" value="" name="inpost_description">
                                    </div>
                                    <div id="select-inpost" class="form-group">
                                        <label for="easypack-widget"
                                               class="col-form-label">{{ __('front.shipment_block.inpost') }}</label>
                                        <div id="easypack-widget"></div>
                                    </div>

<script type="text/javascript">
        window.onload = function () {
            easyPack.dropdownWidget('easypack-widget', function (point) {
                $('#address_details_inpost').val(JSON.stringify(point.address_details));
                $('#inpost_name').val(point.name);
                $('#inpost_description').val(point.location_description);
            });
        }
    </script>


    <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
    <link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>
    <script type="text/javascript">
        window.easyPackAsyncInit = function () {
            easyPack.init({});
            var map = easyPack.mapWidget('easypack-map', function (point) {
                console.log(point);
            });
        };
    </script>

Podbijam to pytanie, ktoś? Coś? :D

Spróbowałeś to wrzucić do vue? Zrobiłeś coś w tym kierunku, że pojawiły się jakieś błędy?

To na początek jakby:

<template>
    <div>
        <div>
            <input
                id="address_details_inpost"
                type="hidden"
                v-model="addressDetailsInpost"
                name="address_details_inpost"
            >

            <input
                id="inpost_name"
                type="hidden"
                v-model="inpostName"
                name="inpost_name"
            >

            <input
                id="inpost_description"
                type="hidden"
                v-model="inpostDescription"
                name="inpost_description"
            >
        </div>
        <div id="select-inpost" class="form-group">
            <label for="easypack-widget"  class="col-form-label">Costam</label>
            <div id="easypack-widget"></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['point'],
        data() {
            return {
                addressDetailsInpost: null,
                inpostName: null,
                inpostDescription: null,
            }
        },
        mounted() {
            this.addressDetailsInpost = point.address_details
            this.inpostName = this.point.name
            this.inpostDescription = this.point.location_description
        }
    }
</script>

Nie wiem co robi easyPack.dropdownWidget wiec na razie mozesz te dane przeslac jako point w tym celu w widoku wklejasz. Ale najpierw musisz w pliku app.js zarejestrowac komponent np powiedzmy

import Vue from 'vue'

Vue.component('inpost-widget, require('./components/inpost-widget.vue').default)

const app = new Vue({
    el: '#app',
})

potem mozesz uzywac juz tego komponentu jako tagu html

<inpost-widget
  :point="{{ json_encode($point) }}"
/>

W ten sposób z kontrolera wysyłasz dane $point do widoku a on dołącza ci plik VUE i przesyła jsone (point) dlatego w pliku vue dalem ci props: ['point'], i dzieki temu te dane sa dostepne w calym pliku vue. Mozesz te dane point pobrac w tle AXIOS z serwera i tez mozesz te dane miec do uzywania w pliku vue

Nastepnie skrypt vue wykonuje to co masz zawarte w funkcji mounted() cos jak odpowiednik init()

I na koniec masz Input i podpiety model: v-model="addressDetailsInpost" to oznacza ze cokolwiek wpiszesz w ten input jest natychmiast dostepne w zmiennej this.addressDetailsInpost i odwrotnie. dlatego w mounted jak przypiszesz jakies wartosci to one poajwia sie w inpucie.

I teraz pytanie co chcesz zrobic? czy ma sie cos wykonac podczas pisania czy klikniecia

AAA no i nie zapomnij skompilowac: npm run dev

Mozesz tez lekko przerobic skrypt bez potrzeby kompilowania, tak zeby byl dostepny zaraz ze wszystkimi zmianami w pliku.

<html>
<div id="app">
  <div>
            <input
                id="address_details_inpost"
                type="hidden"
                v-model="addressDetailsInpost"
                name="address_details_inpost"
            >

            <input
                id="inpost_name"
                type="hidden"
                v-model="inpostName"
                name="inpost_name"
            >

            <input
                id="inpost_description"
                type="hidden"
                v-model="inpostDescription"
                name="inpost_description"
            >
        </div>
        <div id="select-inpost" class="form-group">
            <label for="easypack-widget"  class="col-form-label">Costam</label>
            <div id="easypack-widget"></div>
        </div>
  </div>

<script>

  new Vue({
      el: "#app",
      data: {
              addressDetailsInpost: null,
                inpostName: null,
                inpostDescription: null
        },
      mounted() {
            this.addressDetailsInpost = point.address_details
            this.inpostName = this.point.name
            this.inpostDescription = this.point.location_description
        }
  })
</script>
  </html>

i musisz sobie dokleic CDN do VUE

tak wiem ze stare ale moze si ekomus przydac