Удалить вложенный объект из массива в Vue - PullRequest
Новая
       16

Удалить вложенный объект из массива в Vue

0 голосов
/ 02 октября 2018

пытается удалить вложенный объект из массива.Я провел некоторое исследование и наткнулся на пример, похожий на мой, Vue.js Удалить вложенный объект из массива .

Однако моя проблема немного сложнее, так как я пытаюсьудалить объект с помощью запроса ajax.По сути, мой массив обручения содержит вложенные объекты вопросов

enter image description here

, поэтому вот как я отображаю список вопросов для задания 

<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)
      })                
    },

Прямо сейчас мой сигнал тревоги звучит так: «Идентификатор не определен», хотя у меня есть другие варианты этого кода, где я получаю внутреннюю ошибку сервера 500, которая заставляет меня думать, что я не правильно собираю идентификатор вопроса, поэтомузнает, какой из них удалить ...

ниже - сигнал тревоги, который я получаю в консоли.Я также сделал то, на что указывает первая стрелка для наблюдателя 

console.log(question)

enter image description here

1 Ответ

0 голосов
/ 02 октября 2018

проблема заключалась в том, что элемент b-модели, который содержал @ click = "deleteQuestion", находился вне div, который содержал v-for, поэтому, когда я нажимал на кнопку b-modal, он не захватывал идентификаторвопроса.Поэтому я переместил b-модал в этот 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>
...