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.

0
Ondřej 23 marzec 2020, 21:24

2 odpowiedzi

Najlepsza odpowiedź

Po prostu upewnij się, że poprawnie importujesz komponenty potomne wewnątrz jego rodzica:

main-component > watchlist > watchlist-item
               |           |
              has         has 
0
Syed 24 marzec 2020, 14:22

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
        }
    }
0
Ifaruki 24 marzec 2020, 14:30