I am using Laravel 6 and VUE. I am converting a blade file into a VUE component. The blade file contains a table with rows of data being pulled in from a mysql DB. I have created a draggable component that is displaying users and will allow me to drag and drop rows in order to rearrange them, and the table is using VUE slots to pass html to my component. On my index view the table has a button on it. When the button is clicked it goes to a /create endpoint/route that I defined in Laravel using a routes.php file. I don't want to use vue routing, I prefer to maintain my laravel routes as they are. The issue I am having is, I do not know how to implement this exactly as I am new to VUE. Can someone shed some light on this? I tried using axios but maybe I am mis-using? Is there a better way to use a vue component but continue to use my routes I have defined in routes.php? Thank you.
main.blade.php
<!-- Draggable Component -->
<div id="app">
<draggable table=@yield('content.main')></draggable>
</div>
routes.php (partial to show which endpoint I am wanting to hit)
$route->any('users/create', 'UsersController@create');
Draggable.vue
<template>
<section v-bind:table="table">
<button class="btn btn-default" @click="create()">
<i class="fa fa-plus"></i>
</button>
<slot></slot>
</section>
</template>
<script>
export default {
props: ['table'],
data() {
return {
draggable: '',
};
},
created() {
this.draggable = this.table;
},
methods: {
create() {
axios.get(this.endpoint, {
UserName: this.UserName
}).then(res => {
this.creating = true;
this.UserName = res.data.UserName
}).catch(err => {
console.log("Error: " + err);
})
},
},
computed: {
endpoint() {
return `users/create`;
},
}
};
</script>
The error I get when the button is clicked:
Error: Request failed with status code 404
