working with Laravel 10 and Vue Js 3 and I need save Tag Name on the table. I have following AdminController
public function addTag(Request $request){
return Tag::create([
'tagName' => $request->tagName
]);
}
web.php
Route::post('app/create_tag', [AdminController::class, 'addTag']);
and tags.vue file is
<Modal v-model="addModal" title="Add Tag" :mask-closable="false" :closable="false">
<Input v-model="data.tagName" placeholder="Add Tag Name" style="width: 300px" />
<div slot="footer">
<Button type="default" @click="addModal=false">Close</Button>
<Button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{ isAdding ? 'Adding..' : 'Add tag' }}</Button>
</div>
</Modal>
<script>
methods : {
async addTag(){
if(this.data.tagName.trim()=='') return this.e('Tag name is required')
const res = await this.callApi('post', 'app/create_tag', this.data)
if(res.status===200){
this.tags.unshift(res.data)
this.s('Tag has been added sucessfully!')
this.addModal = false
this.data.tagName = ''
} else {
this.swr()
}
}
},
</script>
but when I try to save tag name on the table I got following error msg on the inspect of the browser
[Vue warn]: Unhandled error during execution of component event handler
at <Button type="primary" onClick=fn<bound addTag> disabled=false ... >
at <BaseTransition onAfterLeave=fn<bound animationFinish> appear=false persisted=false ... >
at <Transition name="ease" onAfterLeave=fn<bound animationFinish> >
at <Modal modelValue=true onUpdate:modelValue=fn title="Add Tag" ... >
at <Tags onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
how could I fix this problem?
my common.js
export default {
data(){
return {
}
},
methods:{
async callApi(method, url, dataObj ){
try {
return await axios({
method: method,
url: url,
data: dataObj
});
} catch (e) {
return e.response
}
}
}