Zmienna globalna vue.js

Zmienna globalna vue.js
Sandra
Sandra
Sandra
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:12 miesięcy
  • Postów:223
0

Potrzebuje zmiennej globalnej do przechowywania pobieranej na starcie wartości z API - później będzie ta zmienna używana jako element ścieżki do obrazka.

Próbowałam

Kopiuj
Vue.prototype
  • ale Vue pozostaje undefined więc nie da rady.
Kopiuj
globalThis.Text
  • przechowuje zmienną ok ale czy da się z tego wartość wyciągnąć w src?
Kopiuj
src="cos/dalej/globalThis.Text"
src="cos/dalej/{{globalThis.Text}}"

nie podziałało

Jakaś inna prosta metoda?
Moja znajomość z vue jest baaardzo krótka i słaba.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
1programmer
1programmer
1programmer
1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:około 2 godziny
  • Lokalizacja:Wrocław
  • Postów:498
2

Do this.$root.$refs nie da rady? Ogólnie do takich rzeczy, to raczej Vuex, Pinia albo jak Vue 3, to można do composition function wyciągnąć to.

W jakim miejscu chcesz to przypisać?

Programować muszę, bo się uduszę
edytowany 1x, ostatnio: 1programmer
Zobacz pozostałe 3 komentarze
1programmer
@Sandra: no to na pewno możesz przypisać w App.vue this.$refs.text = '/img/url...', a potem w dowolnym komponencie np. w computed wyciągnąć z this.$root.$refs.text
1programmer
@Sandra: btw jak chcesz dla img coś podstawić do src, to bindujesz :src="cos/dalej/{{ imageUrl }}"
Sandra
@szafran98: ok właśnie miałam o to pytać :) dzięki zaraz sprawdzę
Sandra
@szafran98: albo robię coś źle albo hmm... na debugu this jest undefined i nic nie mogę tam przypisać dalej
1programmer
@Sandra: to pokaż kod, ale już w poście normalnie i tak też prowadźmy dyskusję, bo się mody wkurzą xd
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Szalony Programista2
SP
Szalony Programista2
SP
  • Rejestracja:prawie 3 lata
  • Ostatnio:ponad 2 lata
  • Postów:181
1

Sandra, jak znasz podstawy javascript, to polecam ci obejrzeć internalsy Reacta, tam ludzie pokazują jak jest zaimplementowany useState hook, czyli obiekt sobie wczytujesz, co wewnątrz siebie tak jakby globalnie trzyma dane o stanie aplikacji, ale można też to gdzieś wyżej zaimportować.

W Vue jest podobnie obejrzyj sobie, zawsze trochę wiedzy ci wleci.
Javascript jest wszędzie taki sam.

Knowledge Distiller
Sandra
@Szalony Programista2: dzięki na pewno sprawdzę :)
SP
Szalony Programista2
Mega ja też jak to pierwszy raz widziałem to mówię, że ciekawe i sprytne, fajnie zobaczyć jak ludzie zaimplementowali te frameworki jak Vue, React w gołym javascript, żeby potem tą wiedzę wykorzystać.
Sandra
Zawsze dobrze wiedzieć jak to wszystko działa pod tą ładną przykrywką :)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Sandra
Sandra
Sandra
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:12 miesięcy
  • Postów:223
0

App.vue

Kopiuj
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
name: 'App',
created() {
fetch("/api/path")
method: Get
.....
.then(response => response.json())
.then(json => {
this.$root.$refs.text = json['myValue'];
})
},
components:{ ....

i w drugim pliku

Kopiuj
<template>
<div class='nav'>
<img class=navimg,
alt="xxx",
src="/local/img/{{ this.$root.$refs.text }}/shared/icon.svg" />
...[reszta divów i importów]
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
1programmer
1programmer
1programmer
1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:około 2 godziny
  • Lokalizacja:Wrocław
  • Postów:498
0

Na pewno w templacie nie odwołuje się do this tylko po prostu {{ $root.$refs.text }}. Drugi plik to inny komponent? W hooku created this jest undefined? To jest apka wykorzystująca tylko Vue?

Programować muszę, bo się uduszę
edytowany 1x, ostatnio: 1programmer
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Sandra
Sandra
Sandra
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:12 miesięcy
  • Postów:223
0

Tak drugi plik to inny komponent. W sumie rzuciłam w kilku miejscach coś z this żeby posprawdzać wartości to wszędzie jest undefined w obu plikach.
Vue i ts na froncie

edytowany 1x, ostatnio: Sandra
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
1programmer
1programmer
1programmer
1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:około 2 godziny
  • Lokalizacja:Wrocław
  • Postów:498
0

No to jak this jest undefined, to coś jest w ogóle zepsute. Jeśli tam jeszcze nic nie masz, to polecam stworzyć projekt przez vue cli i wtedy utworzy Ci na pewno poprawną strukturę projektu oraz komponenty jako SFC (Single File Component).

Programować muszę, bo się uduszę
Zobacz pozostałe 2 komentarze
Sandra
@szafran98: dobra this wypełnia się dopiero gdzieś duuuużo niżej. Może kwestia localhosta <?> obejdę to sobie z Twoim rozwiązaniem i dodatkową funkcją na samym końcu - może uda się załadować potrzebny element mimo to na czas :) dzięki! branch odbity świeżo z mastera więc jest tam to samo
1programmer
@Sandra: na pewno nie przez localhosta, ale powodzenia, bo widzę, że skopany projekt XD
Xarviel
Musisz chyba znaleźć inny sposób niż this.$root.refs, bo dokumentacja twierdzi, że ta właściwość jest dostępna jedynie po pierwszym renderze, a metoda created działa właśnie przed tym renderem, więc możliwe, że dlatego "nie działa" https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Sandra
@Xarviel może tak być nie przeczę nie wiedziałam tego :)
Xarviel
Dlatego wysłałem link :) Zamiana created na mounted teoretycznie powinna rozwiązać problem z dostępem do this.$root.$refs, ale... dane zostaną wtedy pobrane po wyrenderowaniu komponentu.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)