在 Vue.js 中删除对象

Question

我遇到了问题，需要帮助。我正在尝试用 Vue.js 教学。我正在做一个测验，我想在这里放一个删除问题的按钮。我试过这个：

        deleteQuestion(index) 
    {        
        this.questions.splice(index, 1);
    }

但它只会删除第一个问题，尽管当我想删除第二个问题时。有什么帮助吗？

完整代码：

HTML：

            <div class="question" v-for="question in questions">
            <!-- Znění otázky -->
            <h2>{{ question.question }}</h2><button @click="deleteQuestion" class="doprava"><img src="criss.png"/></button>
            <!-- Odpovědi -->
            <label v-for="answer in question.answers" class="answer" :class="{ 'answer-correct':answer.correct, 'answer-false':answer.false }">
                <input type="checkbox" :value="answer.id" v-model="question.selected"> {{ answer.answer }}
            </label>
        </div>
        <hr>
        <button @click="onSubmit()">onSubmit</button>

JS：

var vm = new Vue({
el: "#app",
data: {
    questions: questions,
    result: 0
},
methods: {
    onSubmit() {
        this.result = 0

        this.questions.forEach(question => {
            question.answers.forEach(answer => {
                answer.correct = question.correct.includes(answer.id);
                answer.false = question.false.includes(answer.id);
            });
        });
    },
    deleteQuestion(index) 
    {        
        this.questions.splice(index, 1);
    }
}

});

Answer 1

您尚未将索引传递给您的 deleteQuestion 方法。请在您的模板中尝试此操作：

<div class="question" v-for="(question, index) in questions">
  <h2>{{ question.question }}</h2>
  <button @click="deleteQuestion(index)" class="doprava">
    <img src="criss.png"/>
  </button>

etc.

但是更好的选择可能是给每个问题一个id 属性，然后通过再次过滤id 来删除它。这是因为您不能保证template 中问题的顺序/索引在每次重新呈现时都是一致的。可以这样做：

<button @click="deleteQuestion(question.id)">

然后在你的方法中：

deleteQuestion(id) {
  this.questions = this.questions.filter(q => q.id !== id);
}