csrf toke is not passing to vuejs in laravel 8 - laravel

Question

I am trying to make an file uploader using vuejs in laravel 8, I am using the following meta tag for this purpose :
<meta name="csrf-token" content="{{ csrf_token() }}">
But unfortunately I am still getting error 419. I am sharing screenshots of page source and console result bellow :
page source :
Console result :
My codes for axios is :
export default {
data(){
return{
}
},
methods:{
async callApi(method, url, dataobject){
try{
return await axios({
method: method,
url: url,
data: dataobject
});
}catch(e){
return e.response
}
}
}
}
The code in test.vue (where I want the uploader should be working ) :
<template>
<div>
<Button type="success" #click="addname=true">Add New Name</Button>
<table>
<tr>
<td>Name</td>
<td>Created At</td>
<td>Action</td>
</tr>
<tr v-for="(item, i) in array" :key="i" v-
if="array.length">
<td>{{ item.name}}</td>
<td>{{ item.created_at}}</td>
<td>
<Button type="info" size="small"
#click="showEditModal(item, i)">Edit</Button>
<Button type="error" size="small"
#click="showDeletingModal(item,i)"
:loading="item.isDeleting">Delete</Button>
</td>
</tr>
</table>
</div>
<!-- Add -->
<Modal v-model="addname" title="Add New Name" :mask-closable= "false"
:closable = "false" >
<Label>Your Name</Label>
<Input v-model ="data.name" type="text" />
<Upload
multiple
type="drag"
action="/upload">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color:
#3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</Upload>
<div slot="footer">
<Button type="error" #click="addname=false">Close</Button>
<Button type="success" #click="addData"
:disabled="isAdding" :loading="isAdding">{{isAdding ?
'Adding..' : 'Add Name'}}</Button>
</div>
</Modal>
<!-- Edit -->
<Modal v-model="editModal" title="Edit tag" :mask-closable= "false"
:closable= "false">
<Input v-model="edit_data.name" placeholder="Edit tag name"
/>
<div slot="footer">
<Button type="default" #click="editModal=
false">Cancel</Button>
<Button type="primary" #click="editData"
:disabled="isAdding" :loading="isAdding">{{isAdding ?
'Editing..' : 'Edit Name'}}</Button>
</div>
</Modal>
<!-- delete alert modal -->
<Modal v-model="showDeleteModal" width="360">
<p slot="header" style="color:#f60;text-align:center">
<Icon type="ios-information-circle"></Icon>
<span>Delete confirmation</span>
</p>
<div style="text-align:center">
<p>Are you sure you want to delete tag?.</p>
</div>
<div slot="footer">
<Button type="error" size="large" long :loading="isDeleting"
:disabled="isDeleting" #click="deleteName">Delete</Button>
</div>
</Modal>
</div>
</template>
<script>
export default {
data(){
return{
data: {
name : ''
},
addname : false,
editModal : false,
isAdding : false,
array: [],
edit_data : {
name : ''
},
index : -1,
showDeleteModal : false,
isDeleting : false,
deleteItem : {},
deletingIndex : -1,
}
},
methods: {
async addData(){
if(this.data.name.trim()=='') return this.e('Name is required !')
const hi = await this.callApi('post','add_data',this.data)
if(hi.status===201){
this.array.unshift(hi.data)
this.s('Name added successfully')
this.addname = false
this.data.name = ''
}else{
if(hi.status==422){
if(hi.data.errors.name){
this.i(hi.data.errors.name[0])
}
}else{
this.smr()
}
}
},
async editData(){
if(this.edit_data.name.trim()=='') return this.e('name is
required')
const hi = await this.callApi('post', 'edit_data',
this.edit_data)
if(hi.status===200){
this.array[this.index].name = this.edit_data.name
this.s('Name has been edited successfully!')
this.editModal = false
}else{
if(hi.status==422){
if(hi.edit_data.errors.name){
this.e(hi.edit_data.errors.name[0])
}
}else{
this.smr()
}
}
},
showEditModal(item, index){
let obj = {
id : item.id,
name : item.name
}
this.edit_data = obj
this.editModal = true
this.index = index
},
async deleteName(){
this.isDeleting = true
const hi = await this.callApi('post', 'delete_data',
this.deleteItem)
if(hi.status===200){
this.array.splice(this.i,1)
this.s('successfully Deleted')
}else{
this.smr()
}
this.isDeleting = false
this.showDeleteModal = false
},
showDeletingModal(item, i){
this.deleteItem = item
this.i = i
this.showDeleteModal= true
}
},
async created(){
const hi = await this.callApi('get','get_data')
if(hi.status===200){
this.array = hi.data
}else{
this.smr()
}
}
}
</script>
<style scoped>
.space{
width:100%;
height:5px;
}
</style>

Answer 1

You should manually pass CSRF token when making a request. Just push the following to every request:
_token: document.querySelector("meta[name='csrf-token']").getAttribute("content");