Vue JS CRUD - How to Insert data using API in Vue JS | Insert data using Laravel API in Vue 3 axios

In this video, I have taught how to insert data into database using api in vue js. how to insert data using laravel api in vue js with axios.
How to use axios and insert data in api in vue js 3.

[hubesh]

sir in upcoming react + Laravel series can we do image upload crud

[mdmuradhosen]

Error not detected when we submit button with blank data


<template>
<div class="container mt-5">
<div class="card">
<div class="card-header">
<h4> Add Products</h4>
</div>
<div class="card-body">

<ul class="alert alert-warning" > 0">
<li class="mb-0 ms-3" v-for="(error, index) in this.errorList" :key="index">
{{ error[0] }}
</li>
</ul>

<div class="mb-3">
<label for="">
Name
</label>
<input type="text" v-model="model.product.name" class="form-control" />
</div>

<div class="mb-3">
<label for="">
Detail
</label>
<input type="text" class="form-control" />
</div>


<div class="mb-3">
<button type="button" @click="saveProduct" class="btn btn-primary"> Save </button>
</div>
</div>

</div>
</div>
</template>

<script>
import axios from 'axios';
export default {


name: 'productAdd',
data() {
return {
errorList: '',
model: {
product: {
name: '',
detail: ''
}
}
}
},

methods: {
saveProduct()
{
var mythis = this;
.then (res => {
console.log(res.data)
alert(res.data.message);

this.model.product = {
name: '',
detail: ''
}
this.errorList = ''
})
.catch(function (error) {
if (error.response)
{

if(error.response.status == 422)
{
mythis.errorList = error.response.data.errors;
}

}
else if (error.request)
{
console.log(error.request);
}
else
{

console.log('Error', error.message);
}

});


}

}
}



</script>

[satyanarayanaG-bsld]

What is that extension you have installed

[jcsegura]

no se ve nada de nada el video corrompido