I'm trying to create a page where I can drag and drop rows and have there position number change. The problem I'm getting is this error in my network tab
"message": "No query results for model [App\Product] updateAll",
"exception": "Symfony\Component\HttpKernel\Exception\NotFoundHttpException",
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php",
"line": 199,
"trace": [
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php",
"line": 175,
"function": "prepareException",
"class": "Illuminate\Foundation\Exceptions\Handler",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/app/Exceptions/Handler.php",
"line": 49,
"function": "render",
"class": "Illuminate\Foundation\Exceptions\Handler",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 83,
"function": "render",
"class": "App\Exceptions\Handler",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 32,
"function": "handleException",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php",
"line": 41,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Routing\Middleware\SubstituteBindings",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php",
"line": 68,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\VerifyCsrfToken",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php",
"line": 49,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\View\Middleware\ShareErrorsFromSession",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php",
"line": 63,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Session\Middleware\StartSession",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php",
"line": 37,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php",
"line": 66,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Cookie\Middleware\EncryptCookies",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 104,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
"line": 667,
"function": "then",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
"line": 642,
"function": "runRouteWithinStack",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
"line": 608,
"function": "runRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Router.php",
"line": 597,
"function": "dispatchToRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
"line": 176,
"function": "dispatch",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 30,
"function": "Illuminate\Foundation\Http\{closure}",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/fideloper/proxy/src/TrustProxies.php",
"line": 57,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Fideloper\Proxy\TrustProxies",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php",
"line": 31,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php",
"line": 31,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php",
"line": 27,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\ValidatePostSize",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php",
"line": 62,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 151,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php",
"line": 53,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php",
"line": 104,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
"line": 151,
"function": "then",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php",
"line": 116,
"function": "sendRequestThroughRouter",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "/home/vagrant/Websites/laravel-vue/public/index.php",
"line": 55,
"function": "handle",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
}
]
}
I'm not sure where I went wrong to get this error.
TableComponent.vue
<template>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Title</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
<th>Sort</th>
</tr>
</thead>
<draggable :list="productsNew" :options="{animation:200, handle:'.my-handle'}" :element="'tbody'" @change="update">
<tr v-for="(product, index) in productsNew">
<td>
<a :href="'products/' + product.id + '/edit'">{{ product.supplier_code }}</a>
</td>
<td>
<a :href="'products/' + product.id + '/edit'">Edit</a>
</td>
<td>
<form :action="'products/' + product.id" method="POST">
<input type="hidden" name="_token" :value="csrf">
<input type="hidden" name="_method" value="delete">
<button class="btn btn-danger"><i class="fa fa-pencil"></i> Delete</button>
</form>
</td>
<td>
{{ product.position }}
</td>
<td>
<i class="fa fa-arrows my-handle"></i>
</td>
</tr>
</draggable>
</table>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
props: ['products'],
data(){
return{
productsNew: this.products,
csrf: document.head.querySelector('meta[name="csrf-token"]').content
}
},
methods: {
update() {
this.productsNew.map((product, index) => {
product.position = index + 1;
})
axios.put('/admin/products/updateAll', {
products: this.productsNew
}).then((response) => {
//success message
})
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
My route
Route::put('admin/products/updateAll', 'Admin\ProductsController@updateAll')->name('admin.products.updateAll');
My ProductsController
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Product;
class ProductsController extends Controller
{
public function updateAll(Request $request)
{
dd($request->products);
return response('Update Successfully', 200);
}
}
If there is anything else I missed in showing here please let me know.
