删除 v-for 指令中的列表项

Posted 2023-02-22

【中文标题】删除 v-for 指令中的列表项

【英文标题】：Delete list item in v-for directive

【发布时间】：2020-08-08 15:12:13

【问题描述】：

这里我有一个显示一个列表的组件。 列表中的每个元素都可以通过单击列表项侧的一个按钮来删除。

模板

    <div
    v-for="(question, index) in questions"
    :key="index"
    class="q-gutter-md row items-start">
      <q-input
      v-model="question.question"
      label="Domanda"
      lazy-rules
      :name="'question' + index"
      :rules="[lengthValidation]"
      ></q-input>

      <q-select
      v-model="question.answerType"
      :options="answerTypesList"
      label="Tipo di risposta"
      :name="'answerType' + index"
      ></q-select>

      <q-btn
      flat
      class="q-ml-sm"
      color="negative"
      icon="cancel"
      :label="index"
      @click="removeQuestion(index)" />
    </div>

脚本

    removeQuestion (evt, index) 
      console.log(index)
      this.questions.splice(index, 1)
    

结果

注意：第一行不是列表的一部分

当我“console.log”从组件接收到的“index”变量时，打印的值是“undefined”，但正如您所见，在“delete”符号的一部分中，索引是正确的。

我该如何解决这个问题？

最好的问候

Edit on 2020/04/26修改了脚本代码，因为 split 方法返回了一个包含已删除项的数组并从数组中删除了该项：

之前

this.questions = this.questions.splice(index, 1)

当前

this.questions.splice(index, 1)

【参考方案1】：

您只从侦听器传递了一个值，即索引，因此该方法将在其第一个参数evt 中接收该值。删除该参数以获取 index 中的值：

removeQuestion (index) 
  console.log(index)
  this.questions.splice(index, 1)

或者，如果您想保留两个参数，请确保从侦听器传递 $event：

@click="removeQuestion($event, index)"

你可能期望事件会自动传递，因为当你附加一个没有调用的处理程序时，Vue 会默认传递事件。如：

@click="removeQuestion"

这会自动传递一个参数，$event。但如果您指定自己的调用（即()），则不会发生。

【讨论】：

感谢您的帮助，问题已解决！你能把“this.questions = this.questions.splice(index, 1)”换成“this.questions.splice(index, 1)”吗，因为那是错误的？