the beginner vue, typed according to the example of the official website, how to click the button and the font didn"t get bigger
Html Code:
<body>
<div id="blog-posts-events-demo">
<div :style="{ fontSize: postFontSize + "em" }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
</div>
</body>js Code
Vue.component("blog-post", {
props: ["post"],
template: `
<div class="blog-post" v-on:enlarge-text="postFontSize+=0.1">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit("enlarge-text")">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>`
})
let a = new Vue({
el: "-sharpblog-posts-events-demo",
data: {
posts: [
{id: 1, content: "My journey with Vue", title: "1"},
{id: 2, content: "Blogging with Vue", title: "2"},
{id: 3, content: "Why Vue is so fun", title: "3"}
],
postFontSize: 1
}
})