s6e92 components with data method

2018-04-16 23:16:04 -04:00 · 2018-04-16 23:16:04 -04:00 · 74fccdfb14
commit 74fccdfb14
parent f0f9acb0eb
2 changed files with 10 additions and 5 deletions
--- a/lessons/app.js
+++ b/lessons/app.js
@ -1,10 +1,13 @@
 Vue.component('ts-cmp', {
  data() {
-    return {
-        status: "Critical!",
-    };
+    return {status: 'Critical'};
  },
-  template: '<p> Server status {{ status }} </p>'
+  template: '<p> Server status {{ status }}  <button @click="changeStatus">XXX</button></p>',
+  methods: {
+    changeStatus(){
+      this.status = 'Normal';
+    }
+  }
 });

 var app = new Vue({
--- a/lessons/index.html
+++ b/lessons/index.html
@ -8,6 +8,8 @@
  <body>
    <div id='app'>
        <ts-cmp></ts-cmp>
+        <hr>
+        <ts-cmp></ts-cmp>
    </div>

    <div id='app'>