working with Laravel 8 and Vue Js 3. this project use iview and vuex also. I have following tags.vue file
<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>
</td>
</tr>
and I have following showDeletingModal in the tags.vue file
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')
console.log(deleteModalObj)
// this.deleteItem = tag
// this.deletingIndex = i
// this.showDeleteModal = true
}
},
my states management available in store.js file as well
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
//console.log(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;
but when I click delete button on the tags file it is not popup delete button. how could I fix this problem?
