Section 7

by Rushan Sakhibgareev

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
   <my-cmp> 
   </my-cmp>
   <hr>
   <my-cmp> 
   </my-cmp>

</div>

<div id="app2">
   <my-cmp> 
   </my-cmp>
   <hr>
   <my-cmp> 
   </my-cmp>

</div>

JavaScript

//var data = {status: 'Critical'}

var cmp = {
   data: function(){
      return {
          status: 'Critical'
      }
   },
   template: '<p>Server Status: {{ status }} (<button @click="changeStatus">Change</button>)</p>',
   methods: {
       changeStatus: function() {
           this.status = 'Normal'
       }
   }
};

new Vue({
   el: '#app',
   components: {
      'my-cmp': cmp
   } 
})

new Vue({
   el: '#app2'
})