Delete nested object from array in Vue - ajax

Question

trying to delete a nested object from an array. I've done some research and came across an example similar to mine, Vue.js Remove a Nested Object from Array.
However my issue is a slight more complex as I am trying to delete the object with ajax request. Essentially my engagement array contains nested objects of questions
so here is how I am displaying the list of questions for the engagement
<div v-for="question in engagement.questions" :key="question.id">
<div>
<div ">
{{ question.question }}
</div>
<div >
<span>Answered: </span>
<input type="checkbox" v-model="question.answered">
</div>
</div>
</div>
this is the button that will delete the question
<b-btn #click="deleteQuestion(engagement, question)">Confirm</b-btn>
and this is method that dispatches to the store
deleteQuestion(engagement, question) {
this.$store.dispatch('deleteQuestion', id)
.then(() => {
this.$router.push({path: '/engagement/' +this.engagement.id , query: {alert: 'The Question Was Succesfully Deleted'}});
})
},
and this is the store method
deleteQuestion(context, id) {
axios.delete('/questions/' + id)
.then(response => {
context.commit('deleteQuestion', id)
})
.catch(error => {
console.log(error)
})
},
Right now my alarm is getting “id is not defined” although I have other variations of this code where I will get a 500 internal server error which makes me think that I am not properly capturing the id of the question so it knows which one to delete…
below is the alarm I am getting in the console. I also did which is what the first arrow is pointing to for the observer
console.log(question)

Answer 1

the issue was that the b-model element that contained the #click="deleteQuestion" was outside of the div that contained the v-for so when I would click on the b-modal button it wasn't grabbing the id of the question. So I moved the b-modal to that div and it worked. Thank you for the help.
<div class="card mb-3" v-for="(question, index) in engagement.questions" :key="index">
<div class="card-header">
<div class="h6 m-0 justify-content-between d-flex">
<router-link class="btn btn-sm btn-primary mr-3" to="#" ><i class="far fa-edit mr-2"></i>Edit</router-link>
<b-btn class="outline-secondary" size="sm" v-b-modal.myQuestion><i class="fas fa-trash"></i><span class="ml-2">Delete</span></b-btn>
</div>
</div>
<div class="card-body bg-light d-flex justify-content-between">
<div class="h4 mr-5 text-left">
{{ question.question }}
</div>
<div class="ml-5 d-flex align-self-center">
<span class="font-weight-bold mr-2">Answered: </span>
<input class="mt-2" type="checkbox" v-model="question.answered">
</div>
</div>
<!-- this is the modal for deleting a question -->
<b-modal id="myQuestion" ref="myModalQuestion" hide-footer title="Delete Question">
<div class="d-block text-left">
<h5>Are you sure you want to delete question?</h5>
<br>
<p><strong>*Warning:</strong> Can not be undone once deleted.</p>
</div>
<div class="d-flex">
<b-btn class="mt-3" variant="danger" #click="hideModal">Cancel</b-btn>
<b-btn class="mt-3 ml-auto" variant="outline-success" #click="deleteQuestion(engagement, question.id)">Confirm</b-btn>
</div>
</b-modal>
</div>