typescript - Bootstrap Vue 阻止/取消事件

Question

我有一个页面，其中包含来自 Bootstrap Vue 的 b-form-select 控件。 当我更改此控件的值时，我想执行一个可以取消此事件的函数，而不更改值。

为了让事情变得更复杂，我的选择在子组件中，而我执行的函数在父组件中。

子组件

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 似乎没有对更改事件的阻止修饰符。 我也尝试过使用 native 事件，但有同样的问题。

我做错了什么吗？

Answer 1

禁用禁止选项可能比神秘地让它们不选择所选值更好的用户体验，但您可以通过保存旧值并在 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>