Bootstrap Vue предотвращение / отмена события - PullRequest
Новая
       24

Bootstrap Vue предотвращение / отмена события

0 голосов
/ 03 января 2019

У меня есть страница с элементом управления b-form-select из Bootstrap Vue.Когда я изменяю значение этого элемента управления, я хочу выполнить функцию, которая может отменить это событие, а не изменить значение.

Чтобы сделать вещи более сложными, мой выбор находится в дочернем компоненте, а функция IВыполнение находится в родительском.

Дочерний компонент 

public values: any[] = [
  { name: 'default'},
  { name: 'forbidden'},
  { name: 'other option' },
]

<b-form-select :value="property" @change="$emit('onPropertyChange', arguments[0])">
   <option v-for="(val, key) in values" :value="val" :key="key">{{val.Name}}</option>
</b-form-select>

Родительский компонент: 

this.property = { name: 'default' }
public onPropertyChange(newValue) {
  if (newValue.name === 'forbidden') {
    // Not changing this.property
  } else {
    // Changing it
    this.property = newValue
  }     
}

<child :property="property" @onPropertyChange="onPropertyChange"></child>

Когда я выбираю «запрещено» в выборе.Я вижу, что поле выбора изменилось на это значение, но свойство в дочернем элементе, а также свойство в родительском элементе все еще имеют старое значение, которое я и хочу.Как я могу также выбрать, чтобы иметь старое значение?

Bootstrap Vue, кажется, не имеет модификатора предотвращения в событии изменения.Я также пытался использовать нативное событие, но с той же проблемой.

Я что-то не так делаю?

1 Ответ

0 голосов
/ 03 января 2019

Возможно, для пользователя было бы лучше отключить запрещенные опции, чем загадочно заставить их не выбирать выбранное значение, но вы можете получить такое поведение в своем обработчике событий изменения, сохранив старое значение и восстановив его на nextTick.

Обратите внимание, что ваша структура options не подходит для использования с b-form-select. Я сделал вычисление, которое делает правильную структуру и обрабатывает настройку disabled, и использовал это в b-form-select. 

new Vue({
  el: '#app',
  data: {
    selected: 'default',
    options: [{
        name: 'default',
      },
      {
        name: 'forbidden'
      },
      {
        name: 'other option'
      },
      {
        name: 'what I had before'
      },
    ]
  },
  computed: {
    selectOptions() {
      return this.options.map((opt) => ({
        text: opt.name,
        value: opt.name,
        disabled: opt.name === 'forbidden'
      }));
    }
  },
  methods: {
    onChange(newValue) {
      const oldValue = this.selected;

      if (newValue === 'what I had before') {
        this.$nextTick(() => {
          this.selected = oldValue;
        });
      }
    }
  }
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <b-form-select v-model="selected" :options="selectOptions" @change="onChange">
  </b-form-select>

  <div>Selected: <strong>{{selected}}</strong></div>

</div>
...