Utknąłem w Vue.js. Zasadniczo próbuję zawinąć komponent (który jest już wewnątrz jednego komponentu) w jeszcze jeden. Mam listę rozwijaną z wyborem i wywołuję funkcję przy zmianie. Wszystko działa dobrze, dopóki nie zawinę elementu jeszcze jednym na wierzchu. Najwyższy poziom jest w ostrzu, tak jak jest używany z Laravelem. Fragmenty:
Komponent z menu rozwijanym:
<template>
<div id="watchlist-item">
<select @change="changed()" class="form-control"
id="currencies" name="currencyList">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</template>
<script>
export default {
name: "watchlist-item.vue",
methods: {
changed() {
alert("CHANGED");
},
},
}
</script>
Obwoluta:
<template>
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</template>
<script>
export default {
name: "watchlist"
}
</script>
Górny komponent:
<template>
<div id="watchlist">
<watchlist></watchlist>
</div>
</template>
<script>
export default {
name: "main-component"
}
</script>
Szablon ostrza:
@extends('layouts.layout')
<div>
{{-- <div id="maincomponent">--}}
{{-- <main-component></main-component>--}}
{{-- </div>--}}
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</div>
To działa dobrze i otrzymuję powiadomienie o zmianie. Jednak gdy odkomentuję komentowaną część i na odwrót (więc w zasadzie zawijam ją jeszcze raz), vue przestaje mnie ostrzegać. Uważam, że to zachowanie jest dość dziwne, ale dopiero zaczynam od Vue, więc może to tylko mały szczegół, którego mi brakuje. Tak naprawdę nie wiem nawet, czego szukać, więc każda pomoc byłaby bardzo mile widziana. Dziękuję Ci.
2 odpowiedzi
Po prostu upewnij się, że poprawnie importujesz komponenty potomne wewnątrz jego rodzica:
main-component > watchlist > watchlist-item
| |
has has
Cóż, to nie działa, ponieważ musisz go zarejestrować przez components, ale najpierw musisz go zaimportować.
<template>
<div id="watchlistItem">
<watchlist></watchlist>
</div>
</template>
<script>
import watchlist from "path/to/watchlist";
export default {
name: "watchlist",
components: {
watchlist: watchlist
}
}