Vue2 examples

https://github.com/san-kumar/vue2-examples

by superasn

HTML

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/vue@2.5/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue2-http/dist/vue2-http.min.js"></script>
<div id="app">
  <div style="padding:20px;">
    <button @click="get">GET</button>
    <button @click="post">POST</button>
    <button @click="mixin">MIXIN</button>

    <vue2-http ref="http" v-model="data" :error-fn="onError"></vue2-http>

    <pre>{{data}}</pre>
  </div>
</div>

JavaScript

//Initialize as global component
Vue.component('vue2-http', Vue2Http.default);
Vue.use(Vue2Http.default, {
  baseURL: 'https://jsonplaceholder.typicode.com/',
  headers: {
    'X-API-KEY': 1234
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      data: {},
    }
  },
  methods: {
    onError(e) {
      console.log("e: ", e);
    },
    get() {
      this.$refs.http.get('comments', {
        postId: 1
      }).then((result) => console.log("result: ", result));
    },
    post() {
      this.$refs.http.post('posts', {
        body: '123'
      }).then((result) => console.log("result: ", result));
    },
    mixin() {
      this.$http.get('comments', {
        postId: 1
      }).then((result) => console.log("result: ", result));
    }

  }
});