Intégrer Bootstrap et Axios dans Vue.js

				
					
 <template>
<div class="row d-inline-flex">
<form @submit.prevent="onSubmit">//appelle la méthode onSubmit lorsque le formulaire est envoyé
<div class="form-groupe">
<input type="text"
name="title"
v-model="this.title"
ref="put_title"
class="form-control"
placeholder="Titre">
</div>
<br><br>
<div class="form-groupe">
<textarea
name="body"
v-model="this.body"
ref="put_body"
class="form-control"
placeholder="Body...."></textarea>
</div>//les champs title et body sont liés aux variables title et bode via v-model
<br><br>

<input type="hidden" name="userId" v-model="this.userId" ref="put_userId">
<input type="hidden" name="id" v-model="this.id" ref="put_id">
//userId et id sont également liés à this.userId et this.id
<div class="form-groupe">
<button class="btn btn-primary">Update</button>//bouton permet de soumettre le formulaire
</div>
</form>
</div>
</template>
<script>
export default {
name: 'PostUpdate',
data(){
return{
apiUrl: 'https://jsonplaceholder.typicode.com/posts/1',
id: '',
title: '',
body: '',
userId: '',
}
},
methods:{
onsubmit(){
console.log(this.$refs);
const { put_title, put_body, put_id, put_userId} = this.$refs;
const id = put_id.value();
let body= JSON.stringify({
id :id,
title : put_title.value,
body: put_body.value,
userId : put_userId.value,
})

this.axios.put('https://jsonplaceholder.typicode.com/posts/' +id, body)
.then((response) =>{
console.log(response);
console.log(response.status);
if(response.status == 200){
console.log('Post mis à jour :' +JSON.stringify(response.data));
}
})
}
},//récupère les valeurs des champs à partir de this.$refs crée un objet JSON avec les valeurs mises à jour puis envoie une requete PUT à l’API pour mettre à jour le post existant.Si la mise à jour réussit(response.status==200) un message est affiché dans la console.
mounted(){
.get(this.apiUrl)
.then(response => {
console.log(response);
this.title= response.data.title;
this.body = response.data.body;
this.id= response.data.id;
this.userId = response.data.userId;
})//lorsque le composant est monté, une requete GET est envoyée à l’API(this.apiURL) pour récupérer les détails du post existant. Les données sont ensuite assignées aux variables title,body,id et userId
}
}
</script>