v-fetch example (form)

Form example

by shaynekasai

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/@shaynekasai/v-fetch@1.1.1/dist/v-fetch.js"></script>
<div id="app">
  Message: {{ message }}<br>
  Start event hook: {{ eventMsgs.start }}<br>
  Complete event hook: {{ eventMsgs.complete }}<br>
  
  <form method="post" action="//api.mocki.io/v1/136087c2" v-fetch="{ updateModel: 'message', onStart: 'start', onComplete: 'complete' }" @submit.prevent>
    <input type="submit" value="Click me">
  </form>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    eventMsgs: {
    	start: '',
      complete: ''
    }
  },
  methods: {
  	start: function() {
    	this.eventMsgs.start = 'start() called'
    },
    complete: function() {
    	this.eventMsgs.complete = 'complete() called'
    }
  }
})