there is a vue.js app, which has a component in it that represents the whole page. Inside that component, there is another component which represents (for example) a menu. Inside that menu, there is a button with a @click handler that vue.js is supposed to handle. However, that is not happening, and I’m going mad. Please help!
there is a blue bordered button that you are supposed to click for the EXPAND text to change. The components work just fine, and the text is rendered differently when I change the value of the ‘expanded’ property in the menu component. But I cannot get that value to change as a result of the click.
Vue.component(‘vuemenu’, {
template: ‘#menu-template’,
data: function() {
return {
expanded: false
}
},
methods: {
expand: function() {
this.expand = !this.expanded;
}
}
})
Vue.component(‘page’, {
template: ‘#page-template’,
methods: {
}
})
new Vue({
el: ‘#app’,
data: {
},
methods: {
}
})
.expanded {
background-color: red;
color: white;
font-size: 72px;
}
.clickme {
padding: 10px;
border: 1px solid blue;
cursor: pointer;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<page></page>
</div>
<template id=”page-template”>
<div id=”page”>
Here is the menu
<vuemenu></vuemenu>
And here is the rest of the page
</div>
</template>
https://stackoverflow.com/questions/ask#
<template id=”menu-template”>
<div id=”menu”>
Menu
<div class=”clickme” @click=”expand”>
click
</div>
<div :class=”{‘expanded’: expanded}”>
EXPAND
</div>
</div>
</template>
Solution :
There is an error in this code
Vue.component(‘vuemenu’, {
template: ‘#menu-template’,
data: function() {
return {
expanded: false
}
},
methods: {
expand: function() {
this.expanded = !this.expanded; // this.expanded not this.expand
}
}
})
Vue.component(‘page’, {
template: ‘#page-template’,
methods: {
}
})
new Vue({
el: ‘#app’,
data: {
},
methods: {
}
})