Vue component stops working when wrapped into another component

0
votes

I got stucked with Vue.js. I am trying to basically wrap a component(that is already inside one component) into one more. I have a dropdown with a select and I call a function on change. Everything works fine until I wrap the component in one more on top. The top level one is in blade as it's used with Laravel. Snippets:

Component with dropdown:

<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>

Wrapper:

<template>
    <div id="watchlistItem">
        <watchlist-item></watchlist-item>
    </div>
</template>
<script>
    export default {
        name: "watchlist"
    }
</script>

Top component:

<template>
    <div id="watchlist">
        <watchlist></watchlist>
    </div>
</template>

<script>
    export default {
        name: "main-component"
    }
</script>

Blade template:

@extends('layouts.layout')
<div>
{{--    <div id="maincomponent">--}}
{{--        <main-component></main-component>--}}
{{--    </div>--}}

    <div id="watchlistItem">
        <watchlist-item></watchlist-item>
    </div>
</div>

This works fine and i get alert on change. However, when i uncomment the commented part and vice-versa (so basically wrap it one more time) vue stops aletring me. I find this behaviour pretty weird but I am just starting with Vue so maybe its just a small detail I'm missing. I don't really even know what to search for though, so any help would be greatly appreciated. Thank you.

2
javascriptvue.jsvue-component
Are you sure that you are importing child components inside it's parent correctly? like, all component has it's child imported eg. main-component > watchlist > watchlist-item ? - Syed
I'm importing them all globally in one js file. Is that something I should look into? Could that cause the problem? Thank you. - Ondřej
if you are correctly importing components globally then there should be no issue but just for experiment purpose import child components in parent, also if you are very sure that you are using the components in multiple places only try to import components globally. - Syed
I tried mounting globally just main-component and the rest locally in their parent but no change.But I played around with it a bit differently with other component. I have component that fetches data from ajax call and when its in blade.php it works, but when i wrap it in just one component so its main-component > component(that fetches data), it stops reacting and it renders only with default data. So maybe its something to do with laravel? - Ondřej
I really have very less knowledge with Laravel, sorry! I am not sure what's going wrong. - Syed

2 Answers

0
votes

Just make sure that you are importing child components inside it's parent correctly:

main-component > watchlist > watchlist-item
               |           |
              has         has
0
votes

Well it doesnt work because you need to register it via components, but first you need to import it.

<template>
    <div id="watchlistItem">
        <watchlist></watchlist>
    </div>
</template>
<script>
    import watchlist from "path/to/watchlist";
    export default {
        name: "watchlist",
        components: {
           watchlist: watchlist
        }
    }