Delete nested object from array in Vue

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

enter image description here

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)

enter image description here

• Andrey Popov: So what's your exact question?
• TJ Weems: Why I am i getting a "id is not defined" alarm. Just realized that part was not included in the question. Sorry about that. read above to see that I added it. @AndreyPopov
• str: What is the exact and complete error message you are getting? Which file and which file?
• TJ Weems: @str, view the added content above
• Jaya: you are passing question on the click function @click="deleteQuestion(engagement, question)" which is an object to the delete method deleteQuestion(context, id) { which expects an id?

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>