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
Vue.prototype
globalThis.Text
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.
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ć?
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.
App.vue
<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
<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]
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?
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
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).