Update Column Value with the help of vue js in laravel - laravel

Question

This is my blade of laravel
<!-- Main Container -->
<main id="main-container">
<!-- Page Content -->
<div class="content" id="app">
<h2 class="content-heading">Accessory Details</h2>
<div class="block block-themed">
<div class="block-header block-header-default">
<div class="block-options">
<button class="btn btn-success pull-right">New Request</button>
</div>
</div>
<div class="block-content">
<form action="" method="get">
<div class="form-group row">
<label class="col-12" for="example-select2-multiple">Store Location</label>
<div class="col-lg-11">
<select class="form-control" name="store" style="width: 100%;" required>
<option value="">Choose Select Store location..</option>
#foreach($stores as $store)
<option #if($store_selected == $store->id) selected #endif value="{{ $store->id }}">{{ $store->channel_id }} | {{ $store->street_name }}</option>
#endforeach
</select>
</div>
<div class="col-1">
<button type="submit" class="btn btn-alt-success">
Filter
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Dynamic Table Full -->
<div class="block">
<div class="block-content block-content-full">
#include('errors.error')
<div class="table-responsive">
<table class="table table-bordered table-striped table-vcenter js-dataTable-full1" data-page-length='50'>
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">User</th>
<th>Store</th>
<th class="">Request Date</th>
<th class="">Status</th>
<th class=""></th>
</tr>
</thead>
<tbody>
#foreach($accessories as $accessory)
<tr>
<td>{{ $accessory->id }}</td>
<td>{{ $accessory->user->name }}</td>
<td>{{ $accessory->store->channel_id }} - {{ $accessory->store->street_name }}</td>
<td>{{ $accessory->request_date }}</td>
<td>{{ $accessory->status }}</td>
<td><button class="btn btn-primary btn-sm" #click="getdetails({{ $accessory->id }})" data-toggle="modal" data-target="#details">Details</button></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- END Dynamic Table Full -->
<b-modal id="modal-1" title="Details" v-model="dialog" #ok="handleOk">
<form ref="form" #submit.stop.prevent="handleSubmit">
#csrf
{{-- <input type="hidden" v-model="id"/> --}}
<select class="form-control" name="status">
<option>Pending</option>
<option>Ordered</option>
<option>Received</option>
</select>
<br><br>
<table class="table table-bordered">
<tr>
<td>Vendor</td>
<td>Description</td>
<td>QTY</td>
</tr>
<tr v-for="line in lines">
<td>#{{line.name}}</td>
<td>#{{line.description}}</td>
<td>#{{line.qty}}</td>
</tr>
</table>
</form>
</b-modal>
</div>
</main>
<script >
window.app = new Vue({
el: '#app',
mounted: function() {
},
data() {
return {
dialog: false,
lines: [],
}
},
methods: {
getdetails: function(id) {
let self = this;
this.lines = [];
axios.get('/accessory/' + id)
.then(response => {
this.dialog = true;
self.lines = response.data;
console.log(self.lines)
//$(location).attr('href', '/accessory')
})
.catch(function (error) {
alert('Error');
});
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault()
// Trigger submit handler
this.handleSubmit()
},
handleSubmit() {
axios.post('/accessory/status-change/' )
.then(response => {
$(location).attr('href', '/accessory')
})
.catch(function (error) {
alert('Error');
});
}
},
created()
{
}
})
</script>
<script>
$(document).ready(function() {
$('.js-dataTable-full1').DataTable( {
"order": [[ 0, "desc" ]]
} );
});
</script>
Here for the following statement in model , i want to bind it with accessory_request_id which i am recieving {{-- --}}. So what should i select for v-model?
If i check for console.log(self.lines), it returns me an array with accessory_request_id.
Then later on with the help of accessory_reques_id, i want to update status in database.
So follow is my controller code --
{
//return 'test';
//dd($request->all());
$accessory_request = AccessoryRequest::findorfail($request->id);
$accessory_request->status = $request->input('status');
$accessory_request->save();
return ['message' => 'Status Updated'];
}
In web.php -- route is
Route::post('accessory/status-change','AccessoryController#status_change');
please help me to resolve it