How to change data in vue.js component?

Question

JavaScript

There are two components - a button and a menu that should be opened by this button.

button:

<template>
       <button type="button" class="navbar-toggle collapsed" @click="showLeftMenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
</template>

<script type="text/babel">
    export default{
        methods:{
            showLeftMenu(){
                this.$root.$emit('show')
            }
        }
    }
</script>

menu:

<template>
    <div class="sidemenu"  v-show="visible">
        {{visible}}
    </div>
</template>

<script type="text/babel">
    export default{
        data(){
            return{
                visible:  false
            }
        },
        created: function(){
           console.log(this.visible)
        },
        mounted(){
            this.$root.$on('show', function () {
                console.log('open!')
                this.visible = true;
                console.log(this.visible)
            })
        }
    }
</script>

a button click is caught in the menu, true is displayed in the console, but v-show does not work



on the page, nothing changes,


what did I miss?

Answer 1

Because in the callback function your context is most likely wrong.

mounted(){
            var vm = this;
            this.$root.$on('show', function () {
                console.log('open!')
                vm.visible = true;
                console.log(vm)
            })
        }