Удалить элемент списка в директиве v-for - PullRequest
Новая
       53

Удалить элемент списка в директиве v-for

1 голос
/ 25 апреля 2020

здесь у меня есть компонент, который показывает один список. Каждый элемент списка можно удалить, нажав одну кнопку на стороне элементов списка.

Шаблон 

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

Результат Rendered list

Примечание: Первая строка не является частью списка

Когда я «console.log» получаю переменную «index» от компонента, выводится значение «undefined», но, как вы можете видеть, в части символов «delete» индекс правильный.

Как я могу это исправить?

С уважением

Изменить на 2020/04/26 Код сценария изменен, так как метод split возвращает массив с удаленными элементами и удаляет элемент из массива:

До 

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

Ток 

this.questions.splice(index, 1)

1 Ответ

0 голосов
/ 25 апреля 2020

Вы только передали одно значение, индекс, от слушателя, поэтому метод получит его в своем первом аргументе evt. Удалите этот аргумент, чтобы получить значение в index: 

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

Или, если вы хотите сохранить оба аргумента, обязательно передайте $event из слушателя: 

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

Возможно, вы ожидали, что событие пройдет автоматически, потому что когда вы присоединяете обработчик без вызова, Vue пропустит событие по умолчанию. Например: 

@click="removeQuestion"

Это автоматически передает один аргумент, $event. Но если вы укажете свой собственный вызов (например, ()), этого не произойдет.

...