I am currently facing a challenge where I need to use vue.js to edit and update values.
While I have successfully implemented the edit functionality to retrieve the values, I am encountering difficulties with updating them.
To trigger the update action, you can click on the following button:
<span><button type="submit" @click="updateItems" name="add" class="btn btn-default hidden-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save</span></button></span>
Here is the script for the Edit functionality:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
room_id : '',
start_date : '',
end_date : '',
package_id : '',
price : '',
child_price : '',
discount : '',
discount_type : '',
people : '',
price_sup : '',
fixed_sup : '',
tax_id : '',
taxes : ''
},
errors: {
}
}
},
created: function() {
this.fetchRates(this.$route.params.id);
},
methods:{
fetchRates(id){
axios.get(config.apiDomain+'/Rates/'+id+'/edit').then((response)=>this.itemsData = response.data);
},
updateItems(e){
axios.put(config.apiDomain+'/Rates/'+this.$route.params.id, this.itemsData).then(response=>{
// this.this.itemsData = "";
this.$router.push('/admin/rates');
}).catch(error=>{
this.errors = error.response.data;
});
}
},
mounted() {
axios.get(config.apiDomain+'/Rates').then((response)=>this.items = response.data);
}
}
</script>
Below is the Update Controller code snippet in PHP:
<?php
namespace App\Http\Controllers;
use App\Rates;
use Illuminate\Http\Request;
class RatesController extends Controller
{
// Methods for handling index, create, store, etc.
}
The issue being faced includes:
XMLHttpRequest cannot load http://localhost/booking/booking-api/public/Rates/1. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
In addition, there is an error stating:
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
at eval (RatesEdit.vue?5784:221)
If anyone has suggestions for resolving these issues and ensuring that the edited values can be successfully updated upon clicking the save button, please provide your insights. Thank you!