[Vuejs]-Put button outside vue-element

by

0👍

You cannot accomplish what you want using child components. Since it expects it to be a child of the DOM element.

Instead I’d suggest you create two Vue instances and have them share a common global data var that gets modified when the user clicks the menu button.

<div id="nav">
    <button class="btn btn-success btn-lg" v-on="click:showLeft">OPEN MENU</button>
</div>
<div id="leftMenu">
    <aside show="@{{@showLeft}}" placement="left" header="Title" width="350">
        CONTENT HERE
    </aside>
</div>

<script>
var showLeftGlobal = false;

new Vue({
    el: '#leftMenu',
    data: {
        showLeft: showLeftGlobal
    }
});

new Vue({
    el: '#nav',
    data: {
        showLeft: showLeftGlobal
    },
    methods: {
        showLeft: function() {
            // Toggle show
            showLeftGlobal = showLeftGlobal ? false : true;
        }
    }
});
</script>

Leave a comment