VueJS – odchycení externí změny

27. 7. 2020 16:57:31

Ahoj.

Zkouším si hrát s VueJS a nějak nemohu přijít na jednu věc.

Konkrétně potřebuji do formuláře, který je plně v režiji VueJS zakomponovat widget od Zásilkovny. V tom widgetu je určená html třída, na jaký prvek se po volbě pobočky vyplní název pobočky, případně IDčko. A tuto změnu nejsem schopen pomocí VueJS odchytit.

jak se tohle délá, když ta změna nepřijde od uživatele, ale je podstrčená jiným scriptem?

Díky za nakopnutí.

Martin

27. 7. 2020 16:57:31

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458625

node

(5 hodnocení)

27. 7. 2020 17:22:49

musis chytit on change event. neviem ci robis komponentu alebo to len embeduejs takze podla toho si napsies logiku. mutacie idu vzdy zhora nadol, cize od rodica do potomka. nikdy nie naopak. pre opacnu resp. bidi komunikaciu sa pouzivaju eventy.

Components Basics — Vue.js

27. 7. 2020 17:22:49

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458624

Martin

(62 hodnocení)

27. 7. 2020 17:49:04

Zatím jenom embeduju VueJS. Díky. Jdu to zkusit.

---------- Příspěvek doplněn 27.07.2020 v 18:23 ----------

Napsal node;1591849
musis chytit on change event. neviem ci robis komponentu alebo to len embeduejs takze podla toho si napsies logiku. mutacie idu vzdy zhora nadol, cize od rodica do potomka. nikdy nie naopak. pre opacnu resp. bidi komunikaciu sa pouzivaju eventy.

Components Basics — Vue.js

Nějak mi to hlava nebere. Myslíš to tak, že odchytím onchange událost na HTML prvku a vyvolám VueJs událost, která se o to postará? Já to mám teď na zkoušku tak, že mi to ten widget od Zásilkovny vyplní do inputu. Když k tomu input přidám onchange takhle

tak mi to tu událost nevyvolá. Když ten input změním ručně, tak jo.

27. 7. 2020 17:49:04

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458623

node

(5 hodnocení)

27. 7. 2020 18:58:20

ja som robil doposial len kompletne vue appky, nikdy nie embedovane, takze neviem na 100%, ale predpokladam ze ta komponenta sa inicializuje do nejakej premennej. takze v tej komponente si len definujes metodu(v methods) ktora ti zmeni stejt(data) a mimo tej komponenty len pocuvas na on change event ktory ta komponetna vyvola, zachytis ho a potom len zavolas metodu na tej premennej v ktorej drzis tu instanciu vue komponenty. akurat som si neni isty, ci sa eventy z vue propaguju normalne, kedze nejde o normalny dom ale virtual/shadow dom(uz neviem ktory dom vue pouziva). takze eventuelne si budes musiet stiahnut vue plugin ktory emituje vue eventy do dokumentu.

v kazdom pripade, vue dokumentacia je jedna z najlepsich open source projektov aku poznam, takze odpoved na vsetky technicke otazky najdes tam.

---

aha, ty chces vlastne len do vue poslat zmenu, nie naopak, spravne? v tom pripade plati co som napisal(definuj si metodu) a nemusis riesit propagaciu eventu z vue von, kedze ten event asi vznika mimo tej komponenty a ty len chces pri tom evente upravit komponentu manualne?

27. 7. 2020 18:58:20

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458622

Martin

(62 hodnocení)

27. 7. 2020 19:16:42

Myslím že jo :-) Mám prostě komponentu, která potřebuje nějak zjistit, že mi ten externí widget vyplnil třeba input. I když je ten input třeba "v komponentě" a má nastavený v-model, tak mi na tu změnu z venčí nezareaguje.

27. 7. 2020 19:16:42

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458621

Gabonator

(1 hodnocení)

27. 7. 2020 21:00:46

Nemusíš to riešiť cez event.

V inputu zadáš napr. v-modelu="wignet"

potom do scriptu pridáš Watch napr.

watch: {

wignet: function (val) {

nieco.Odpali.Pri.Zmene.wignetu

27. 7. 2020 21:00:46

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458620

Martin

(62 hodnocení)

27. 7. 2020 21:41:09

Jak jsem psal výše, v-model tu externí změnu nezaregistruje, takže tohle co píšeš nefunguje.

Když to udělám, jak jsi to napsal, tak ruční změna obsahu inputu hned vyvolá danou funkci, ale jak obsah změní widget zásilkovny, nezareaguje to.

Napsal Gabonator;1591870
Nemusíš to riešiť cez event.
V inputu zadáš napr. v-modelu="wignet"

potom do scriptu pridáš Watch napr.

watch: {
wignet: function (val) {
nieco.Odpali.Pri.Zmene.wignetu
},

27. 7. 2020 21:41:09

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458619

Miroslav Foltyn

(3 hodnocení)

27. 7. 2020 23:34:02

Čtu to vlákno, ale není mi moc jasné, co přesně je potřeba a co přesně je za problém - chápu jen to, že se vám nějak nedaří pracovat s událostmi mezi částmi aplikace, které jsou součástí Vue a které nejsou. Přikládám příklad, jak by šlo ve Vue reagovat na událost mimo aplikace a jak by šlo mimo aplikaci reagovat na událost, která vnikne ve Vue.

vue-outside-inside-handling - StackBlitz

27. 7. 2020 23:34:02

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458618

Martin

(62 hodnocení)

28. 7. 2020 00:47:14

Napsal Miroslav Foltýn;1591880
Čtu to vlákno, ale není mi moc jasné, co přesně je potřeba a co přesně je za problém - chápu jen to, že se vám nějak nedaří pracovat s událostmi mezi částmi aplikace, které jsou součástí Vue a které nejsou. Přikládám příklad, jak by šlo ve Vue reagovat na událost mimo aplikace a jak by šlo mimo aplikaci reagovat na událost, která vnikne ve Vue.
vue-outside-inside-handling - StackBlitz

Zkusím ještě jednou upřesnit. Zásilkovna má widget ( https://widget.packeta.com/www/configurator/?apiKey=kl%C3%AD%C4%8D%20API%20klienta# ), pro výběr pobočky pro doručení zásilky, který si já umístím na své stránky. U toho widgetu si nastavím HTML class (defaultně je to .packeta-selector-branch-name) a když potom přes ten widget vyberu výdejní místo, doplní se mi do HTML prvku s class "packeta-selector-branch-name" název zvolené pobočky. Do této chvíle je vše zatím mimo VueJs. Já potřebuji, aby VueJs nějak zjistilo,že došlo k výběru výdejního místa.

Zkusil jsem tedy první část z toho odkazu, co jste posílal, kdy se komunikuje z prostoru mimo VueJS komponentu směrem do komponenty. Stejně jako v příkladu jsem vytvořil jeden input mimo VueJs a jeden v VueJs komponentě, V sekci mounted jsem tedy vytvořil JS eventListener na externím inputu, který spustí VueJs metodu a předá jí event. Cílem tedy je, že já píšu do inputu, který je mimo komponentu a text se mi "zrcadlí" v inputu v komponentě. Když to dělám ručně, tedy píšu text do externího inputu, vše funguje a přenáší se i do Vue. Pokud ovšem ten externí input vyplní widget Zásilkovny, do toho druhé inputu se to nepřepíše. J

Je to tedy stejný stav.

Základ bude to, že ani Vue, ani čistý JS nezaregistrují změnu v inputu, kterou provede widget.

28. 7. 2020 00:47:14

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458617

Gabonator

(1 hodnocení)

28. 7. 2020 06:32:57

Ak zmena nastane mimo komponentu VUE tak v tom prípade musíte poslať hodnotu do komponentu

cez props.

ale to asi nebude rada za milion.

28. 7. 2020 06:32:57

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458616

Gabonator

(1 hodnocení)

28. 7. 2020 07:04:45

Cez svoje api prístup

mouted v komponente na tejto adrese nastavenia.

Získaš objekt, ktorý si dáš do data komponentu, a z neho si vytiahneš príslušný udaj.

28. 7. 2020 07:04:45

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458615

Miroslav Foltyn

(3 hodnocení)

28. 7. 2020 10:40:01

Jasně, to že se jedná o nějaký kus kódu, který se vkládá přes iframe, je celkem podstatná informace - se Zásilkovnou jsem nikdy nedělal, tak jsem to neznal. Nelze detekovat eventy v cross-domain iframu (či jinak zasahovat/číst z DOM-u). Vyjímka by byla třeba postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), ale to by museli developeři Zásilkovny nějak implementovat, nemám tam účet, nemám přístup k dokumentaci, pokud nějaká je, takže dál neporadím.

Alespoň mně v Chromu, při pokusu o přístup do DOM-u cross-domain iframe, řve konzole X varování - nepíše vám to v konzoli náhodou nic?

---------- Příspěvek doplněn 28.07.2020 v 11:37 ----------

Po hloubší inspekci, oni to tam již mají funkčně nachystané pro vás - pročtěte si ten zdroják na https://widget.packeta.com/www/js/packetaWidget.js "messaheHandler & fillNodesWithData", přes postMessage si posílají z iframu eventu a populují daty DOM elementy, které matchnou vámi poskytnuté selektory. Nic vám nebrání tu funkci buďto přepsat, nebo si nasadit event handlery na DOM elementy pro inputy, na které referují ony selektory.

28. 7. 2020 10:40:01

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458614

Martin

(62 hodnocení)

28. 7. 2020 12:24:16

Napsal Miroslav Foltýn;1591911
Jasně, to že se jedná o nějaký kus kódu, který se vkládá přes iframe, je celkem podstatná informace - se Zásilkovnou jsem nikdy nedělal, tak jsem to neznal. Nelze detekovat eventy v cross-domain iframu (či jinak zasahovat/číst z DOM-u). Vyjímka by byla třeba postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), ale to by museli developeři Zásilkovny nějak implementovat, nemám tam účet, nemám přístup k dokumentaci, pokud nějaká je, takže dál neporadím.
Alespoň mně v Chromu, při pokusu o přístup do DOM-u cross-domain iframe, řve konzole X varování - nepíše vám to v konzoli náhodou nic?
---------- Příspěvek doplněn 28.07.2020 v 11:37 ----------
Po hloubší inspekci, oni to tam již mají funkčně nachystané pro vás - pročtěte si ten zdroják na https://widget.packeta.com/www/js/packetaWidget.js "messaheHandler & fillNodesWithData", přes postMessage si posílají z iframu eventu a populují daty DOM elementy, které matchnou vámi poskytnuté selektory. Nic vám nebrání tu funkci buďto přepsat, nebo si nasadit event handlery na DOM elementy pro inputy, na které referují ony selektory.

Díky za pomoc. Já jsem javascript neviděl pár let a dost v tom plavu. Nejdřív dotaz ohledně těch event handlerů na dom element.

To máte na mysli něco jako

? Protože o to se nějak snažím celou dobu. Reaguje to na ruční změnu, ale ne na změnu provedenou widgetem.

Povedlo se mi nějak dobrat k funkčnímu řešení tím přepsáním metody, kterou widget vyplňuje políčka ( fillNodesWithData() ), kdy jsem tam natvrdo přidal volání metody z VueJS komponenty

Tím to do Vue dostanu a už na to můžu reagovat.

Je to prasečina nebo je to takto použitelné?

Díky

28. 7. 2020 12:24:16

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458613

Miroslav Foltyn

(3 hodnocení)

28. 7. 2020 12:40:49

Druhý argument pro addEventListener je funkce (nebo objekt https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), což pochybuji, že vám "volanaFunkce" vrací.

Jestli jste si prostě v nějaké lifecycle metodě Vue componenty takto exposnul vnitřní metodu, tak se vám to může rozpadnout již v několika případech - co když je naráz živých více instancí komponenty? Co když ještě nebyla živá žádná? Jestli jste si těchto věcí vědom a nic vám aktuální řešení nemůže rozbít, tak asi OK. Lepší by bylo, při inicializace aplikace vytvoření nějakého Event Busu, který by byl společný pro všechny instance Vue component v dané Vue aplikaci a na který by componenty mohly subscribovat. Nebo nějakou state management library, ale to může být overkill.

28. 7. 2020 12:40:49

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458612

Martin

(62 hodnocení)

28. 7. 2020 12:52:52

ten addEventListener jsem jen špatně napsal. Zkoušel jsem to nějak takhle

To by mělo být ok, ne? Při ruční změně to reaguje, při změně widgetem zásilkovny ne.

28. 7. 2020 12:52:52

https://webtrh.cz/diskuse/vuejs-odchyceni-externi-zmeny#reply1458611