Jan 29, 2023
0
Level 4
Not working Delete button of tags.vue in the Laravel Project
working with Vue Js 3 and Laravel. in the project there is tags.vue file and delete button for the tags tags.vue
<template>
<div>
<div class="content">
<div class="container-fluid">
<!--~~~~~~~ TABLE ONE ~~~~~~~~~-->
<div class="_1adminOverveiw_table_recent _box_shadow _border_radious _mar_b30 _p20">
<p class="_title0">Tag <Button @click="addModal=true" ><Icon type="md-add" /> Add tag</Button></p>
<div class="_overflow _table_div">
<table class="_table">
<!-- TABLE TITLE -->
<tr>
<th>ID</th>
<th>Tag name</th>
<th>Created at</th>
<th>Action</th>
</tr>
<!-- TABLE TITLE -->
<!-- ITEMS -->
<tr v-for="(tag, i) in tags" :key="i" v-if="tags.length">
<td>{{tag.id}}</td>
<td class="_table_name">{{tag.tagName}}</td>
<td>{{tag.created_at}}</td>
<td>
<Button type="info" size="small" @click="showEditModal(tag, i)">Edit</Button>
<Button type="error" size="small" @click="showDeletingModal(tag, i)" :loading="tag.isDeleting">Delete</Button> // this is the delete button
</td>
</tr>
<!-- ITEMS -->
</table>
</div>
</div>
<!-- tag adding modal -->
<Modal
v-model="addModal"
title="Add tag"
:mask-closable="false"
:closable="false"
>
<Input v-model="data.tagName" placeholder="Add tag name" />
<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>
<!-- tag editing modal -->
<Modal
v-model="editModal"
title="Edit tag"
:mask-closable="false"
:closable="false"
>
<Input v-model="editData.tagName" placeholder="Edit tag name" />
<div slot="footer">
<Button type="default" @click="editModal=false">Close</Button>
<Button type="primary" @click="editTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Editing..' : 'Edit tag'}}</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="isDeleing" :disabled="isDeleing" @click="deleteTag" >Delete</Button>
</div>
</Modal> -->
<deleteModal></deleteModal>
</div>
</div>
</div>
</template>
<script>
import deleteModal from '../components/deleteModal.vue'
import { mapGetters } from 'vuex'
export default {
data(){
return {
data : {
tagName: ''
},
addModal : false,
editModal : false,
isAdding : false,
tags : [],
editData : {
tagName: ''
},
index : -1,
showDeleteModal: false,
isDeleing : false,
deleteItem: {},
deletingIndex: -1,
websiteSettings: []
}
},
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===201){
this.tags.unshift(res.data)
this.s('Tag has been added successfully!')
this.addModal = false
this.data.tagName = ''
}else{
if(res.status==422){
if(res.data.errors.tagName){
this.e(res.data.errors.tagName[0])
}
}else{
this.swr()
}
}
},
async editTag(){
if(this.editData.tagName.trim()=='') return this.e('Tag name is required')
const res = await this.callApi('post', 'app/edit_tag', this.editData)
if(res.status===200){
this.tags[this.index].tagName = this.editData.tagName
this.s('Tag has been edited successfully!')
this.editModal = false
}else{
if(res.status==422){
if(res.data.errors.tagName){
this.e(res.data.errors.tagName[0])
}
}else{
this.swr()
}
}
},
showEditModal(tag, index){
let obj = {
id : tag.id,
tagName : tag.tagName
}
this.editData = obj
this.editModal = true
this.index = index
},
async deleteTag(){
this.isDeleing = true
const res = await this.callApi('post', 'app/delete_tag', this.deleteItem)
if(res.status===200){
this.tags.splice(this.deletingIndex,1)
this.s('Tag has been deleted successfully!')
}else{
this.swr()
}
this.isDeleing = false
this.showDeleteModal = false
},
showDeletingModal(tag, i){
const deleteModalObj = {
showDeleteModal: true,
deleteUrl : 'app/delete_tag',
data : tag,
deletingIndex: i,
isDeleted : false,
}
this.$store.commit('setDeletingModalObj', deleteModalObj)
console.log('delete method called')
// this.deleteItem = tag
// this.deletingIndex = i
// this.showDeleteModal = true
}
},
async created(){
const res = await this.callApi('get', 'app/get_tags')
if(res.status==200){
this.tags = res.data
}else{
this.swr()
}
},
components : {
deleteModal
},
computed : {
...mapGetters(['getDeleteModalObj'])
},
watch : {
getDeleteModalObj(obj){
if(obj.isDeleted){
this.tags.splice(obj.deletingIndex,1)
}
}
}
}
</script>
using following deleteModal.vue file seperatly with vuex for the delete button actions
<template>
<div>
<!--delete alert model-->
<Modal
:value="getDeleteModalObj.showDeleteModal"
:mask-closable="false"
:closable="false"
width="360">
<p slot="header" style="color:#f60;text-align:center">
<Icon type="ios-information-circle"></Icon>
<space>Delete confimation</space>
</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="isDeleing" :disabled="isDeleing" @click="deleteTag">Delete</Button>
</div>
</Modal>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
data(){
return {
isDeleing : false,
}
},
methods : {
async deleteTag(){
this.isDeleing = true
const res = await this.callApi('post', this.getDeleteModalObj.deleteUrl, this.getDeleteModalObj.data)
if(res.status===200){
this.s(this.getDeleteModalObj.successMsg)
this.$store.commit('setDeleteModal', true)
}else{
this.swr()
this.$store.commit('setDeleteModal', false)
}
this.isDeleing = false
this.showDeleteModal = false
},
closeModal(){
this.$store.commit('setDeleteModal', false)
}
},
computed : {
...mapGetters(['getDeleteModalObj'])
}
}
</script>
vuex configured with following store.js file
import { createStore } from 'vuex'
const store = createStore({
/* state, actions, mutations */
state : {
conuter : 1000,
deleteModalObj : {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : false,
},
},
getters: {
getCounter(state){
return state.conuter
},
getDeleteModalObj(state){
return state.deleteModalObj
}
// getUserPermission(state){
// return state.userPermission
// },
},
mutations: {
changeTheCounter(state, data){
state.conuter += data
},
setDeleteModal(state, data){
const deleteModalObj = {
showDeleteModal: false,
deleteUrl : '',
data : null,
deletingIndex: -1,
isDeleted : data,
}
state.deleteModalObj = deleteModalObj
state.tags.splice()
},
setDeletingModalObj(state, data){
state.deleteModalObj = data
},
},
actions :{
changeCounterAction({commit}, data){
commit('changeTheCounter', data)
}
}
})
export default store;
and app.js file is
require('./bootstrap');
import router from './router'
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
// import ViewUI from 'view-design';
// import 'view-design/dist/styles/iview.css';
//Vue.use(ViewUI);
import common from './common'
import store from './store'
//Vue.mixin(common)
//import VueI18n from 'vue-i18n'
//Vue.use(VueI18n)
createApp({
components: {
mainapp,
}
}).use(router).use(store).use(ViewUIPlus).mixin(common).mount('#app');
//createApp.use(router)
when I click delete button on tags.vue file is is not working (deleteModal.vue) how could I fix this matter?
Please or to participate in this conversation.