Выберите 2 разметки, чтобы перейти к предыдущему ряду - PullRequest
Новая
       12

Выберите 2 разметки, чтобы перейти к предыдущему ряду

1 голос
/ 01 октября 2019

У меня есть приложение vuejs, которое зацикливается на массиве и выводит множество элементов select2. Рядом с каждым элементом есть кнопка удаления. Когда один из этих элементов удален, возникает ошибка / сбой, который означает, что предыдущее значение select2 применяется к предыдущей строке.

Вот демонстрационная версия: https://jsfiddle.net/3oqsmw0z/1/

Я удаляю элемент с помощьюиндекс, как показано ниже: 

deleteItem: function(index) {
    console.log('deleteItem');
    this.mySelects.splice(index, 1);
}

Чтобы воспроизвести проблему

Выберите первый вариант в первом выборе, второй вариант во втором выборе, а затем третий вариантв третьем выберите. Теперь удалите второй вариант. Теоретически теперь должны отображаться элементы один и три (два было удалено). Но это показывает номер два выбранный вариант. Вы можете видеть, что это третий элемент по метке, и если вы посмотрите на разметку в консоли, это третий элемент. Почему он показывает номер два выбранной опции?

1 Ответ

1 голос
/ 01 октября 2019

На самом деле, когда вы удаляете второй элемент, значение для третьего элемента устанавливается снова. Таким образом, обработчик значения watcher выполняется. В вашем обработчике вы пытаетесь установить значение с помощью jQuery: 

watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value)
    },...

Но это не работает, потому что это действие не вызывает событие change. Таким образом, Vue не отображает никаких изменений.

Чтобы исправить это, запустите явное событие change: 

 watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value).trigger('change')
    },...

Я также заметил в вашей демонстрации, что ваши элементы select не инициализированы правильно,Вы передаете: 

mySelects: [
      {label: 'first', val: 1},
      {label: 'second', val: 2},
      {label: 'third', val: 3}
    ],...

Итак, в первом select должно быть выбрано значение 1, во втором - значение 2 и т. Д.

Есть два шага, чтобы исправить это:

  1. явное событие триггера change после установки значения
  2. установки значения после передачи параметров 
 mounted: function () {
    var vm = this
    $(this.$el)
    // first pass the options
      .select2({ data: this.options })
    // and then set the value
      .val(this.value)
    // trigger change event explicitly to let Vue know that it has to update DOM
      .trigger('change')
    // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
...