从Vue中的数组中删除嵌套对象答案

【问题标题】：Delete nested object from array in Vue从Vue中的数组中删除嵌套对象
【发布时间】：2019-03-07 21:36:29
【问题描述】：

试图从数组中删除嵌套对象。我做了一些研究，发现了一个与我类似的例子，Vue.js Remove a Nested Object from Array。

但是，当我尝试使用 ajax 请求删除对象时，我的问题稍微复杂一些。本质上，我的参与数组包含问题的嵌套对象

这就是我显示参与问题列表的方式

<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>

这是删除问题的按钮

<b-btn  @click="deleteQuestion(engagement, question)">Confirm</b-btn>

这是分派到商店的方法

deleteQuestion(engagement, question) {
      this.$store.dispatch('deleteQuestion', id)
      .then(() => {
        this.$router.push({path: '/engagement/' +this.engagement.id , query: {alert: 'The Question Was Succesfully Deleted'}});
      })
    },

这是存储方法

deleteQuestion(context, id) {
      axios.delete('/questions/' + id)
      .then(response => {
          context.commit('deleteQuestion', id)
      })
      .catch(error => {
          console.log(error)
      })                
    },

现在我的警报正在得到“id is not defined”，尽管我有此代码的其他变体，我会收到 500 内部服务器错误，这让我认为我没有正确捕获问题的 id，所以它知道删除哪个...

以下是我在控制台中收到的警报。我也做了第一个箭头指向观察者的地方

console.log(question)

【问题讨论】：

那么您的具体问题是什么？
为什么我收到“id is not defined”警报。刚刚意识到该部分未包含在问题中。对于那个很抱歉。阅读上面的内容，看看我添加了它。 @AndreyPopov
您收到的准确且完整的错误消息是什么？哪个文件，哪个文件？
@str，查看上面添加的内容
您在点击函数@click="deleteQuestion(engagement, question)" 上传递question，它是删除方法deleteQuestion(context, id) { 的对象，它需要一个id？

标签： ajax vue.js axios vuex

【解决方案1】：

问题在于包含 @click="deleteQuestion" 的 b-model 元素位于包含 v-for 的 div 之外，因此当我单击 b-modal 按钮时，它并没有抓取 id的问题。因此，我将 b-modal 移至该 div 并且它起作用了。谢谢你的帮助。

<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>

【讨论】：