github_api_vue_test/app.js at master · TakehiroTada/github_api_vue_test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var apiURL = 'https://api.github.com/users/'

Vue.component(
  'modal', {
      template: '#modal-template',
      data: function() {
          return {
              active: false,
              task: {
                  id: '',
                  name: '',
                  detail: '',
                  login:'',
                  id2:'',
                  html_url:'',
                  created_at:'',
                  updated_at:'',
              }
          }
      },
      methods: {
          open: function (task) {
              this.active = true;
              this.task = task;
          },
          close: function () {
              this.active = false;
          }
      },
      mounted: function() {
          this.$nextTick(function () {
              app.$on('open-modal', this.open);
              app.$on('close-modal', this.close);
          }.bind(this));
      }
  });


var app = new Vue({

  el: '#app',

  data: {
    user: null,
    response: null,
    message: 'Hello Vue.js!',
    tasks: [
        {id: 1, name: 'Takehiro Tada', detail: 'response.login'
        ,login:'TakehiroTada',id2:40785892,html_url:'https://github.com/TakehiroTada',created_at:'2018-07-03T06:20:51Z',updated_at:'2018-07-03T06:47:37Z'
        },
    ]
  },

  watch: {
    user: 'fetchData'
  },

  methods: {
    fetchData: function () {
      let self = this;

      fetch(apiURL + self.user)
        .then(response => response.json())
          .then(data => {
            self.response = data
          });
    },

    openModal: function (task) {
      app.$emit('open-modal', task);
    },

    closeModal: function () {
      app.$emit('close-modal');
    }

  }
});


// var Hub = new Vue();


// new Vue({
//     el: '#app2',
//     data: {
//         message: 'Hello Vue.js!',
//         tasks: [
//             {id: 1, name: 'let\'s try Vue.js', detail: 'make simple Vue.js app, study how to code vue.js, etc.'},
//             // {id: 2, name: 'learn JavaScript', detail: 'study JS, CoffeeScript, ES6, TypeScript.'}
//         ]
//     },
//     methods: {
//         openModal: function (task) {
//             Hub.$emit('open-modal', task);
//         },
//         closeModal: function () {
//             Hub.$emit('close-modal');
//         }
//     }
// });