JSFiddle - React, Tailwind, and code Playground
HTML
<script src='https://unpkg.com/vue'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'>
<input type="text" v-model='userId' :disabled="disabled == 1 ? true : false">
<br/>
<input type="text" v-model='title' :disabled="disabled == 1 ? true : false">
<br/>
<textarea name="" id="" cols="30" rows="10" v-model='body' :disabled="disabled == 1 ? true : false"></textarea>
<br/>
<button v-on:click='retriveChanges'>click Me</button>
</div>
JavaScript
new Vue({
el: "#app",
data: {
userId: '',
title: '',
body: '',
disabled : false
},
mounted() {
var self = this
setTimeout(function() {
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
self.body = response.data.body
self.title = response.data.title
self.userId = response.data.userId
self.disabled = false
})
.catch(function(error) {
console.log(error);
});
}, 1000) //Async
},
methods: {
retriveChanges: function() {
alert('userId: ' + this.userId + ' | ' + 'title: ' + this.title + ' | ' + 'body: ' + this.body)
}
}
})