Hello Coders!! We have learned about the basic vue js properties and components and now in this article Vue JS 2 Components real-time example: Tutorial 6 we are going to do one example tutorial.
Now, we are going to make the closable model with title and body populate using Vue Js. To start we are going to create the index.html file.
Here is the full code for the index.html component example
Index.html
Here is the index.html that contains the HTML code with vue instance.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
<style type="text/css">body { padding-top: 40px; } </style>
</head>
<body>
<div id="root" class="container">
<message title="Title 1" body="Here is the body 1"></message>
<message title="Title 2" body="Here is the body 2"></message>
<message title="Title 3" body="Here is the body 3"></message>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="vue-component-example/main.js"></script>
</body>
</html>main.js
Here is the js file main.js that contains the vue components.
Vue.component('message',{
props: ['title','body'],
data() {
return {
isVisible: true
};
},
template:`
<article class="message" v-show="isVisible">
<div class="message-header">
<p> {{ title }} </p>
<button class="delete" aria-label="delete" @click="isVisible = false"></button>
</div>
<div class="message-body">
{{ body }}
</div>
</article>
`
})
new Vue({
el: '#root'
})Code Explanation:
In the above code from, index.html I have to integrate the Bulma CSS for design purposes.
Now, I have created an example for a model structure that populates the dynamic title and body text, and individual closable model features.
in this file, there is a div with an id called root that I am going to use in the Vue js file. in that div, I have created the component called message and the two properties title and the body. And Write down the value in it.
<message title="Title 1" body="Here is the body 1"></message>main.js File
Vue.component('message',{
props: ['title','body'],
data() {
return {
isVisible: true
};
},
template:`
<article class="message" v-show="isVisible">
<div class="message-header">
<p> {{ title }} </p>
<button class="delete" aria-label="delete" @click="isVisible = false"></button>
</div>
<div class="message-body">
{{ body }}
</div>
</article>
`
})
new Vue({
el: '#root'
})In this main.js file, I have created the components message and write down the props.
props: ['title','body'],In the above-mentioned props, the Props are passing title and body properly from view blade file to js file that props now component excepts that title and body and manipulate here.
To close the model I have created the method and set isVisible = true every time.
However, when the user clicks on the close button then on click event isVisible set to false and the button populates the close event and the model will hide.
The above way is simple is that no need to create the separate jquery or any other code just set the value in that HTML tags property.
Output:
You are doing good if you are with me in the Vue JS 2 Components real-time example: Tutorial. Keep learning from the vue js 2 series tutorial.
You can also check our previous tutorial from this series Vue JS 2 Components within Components: Tutorial 5 Good Luck!