Переключить vue -выбрать несколько раз закрыть / открыть при нажатии кнопки

Question

Когда я нажимаю на кнопку, открывается множественный выбор. Но когда я нажимаю на кнопку второй раз, значения true / false равны sh, и в результате isOpen остается истинным. Что я делаю не так?

шаблон:

<code><div id="app">
  <button @click="toggle">open and close later
  </button>
    <pre>{{ isOpen }}

js:

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    isOpen: false,
    value: { language: 'JavaScript', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
    },
  methods: {
    toggle () {
        if (this.isOpen) {
        this.$refs.multiselect.$el.blur();
        this.isOpen = false;
      }
      else {
        this.$refs.multiselect.$el.focus();
        this.isOpen = true;
      }

    }
  }
}).$mount('#app')

https://jsfiddle.net/46s5aknt/

Answer 1

Когда я выкопал исходный код этого компонента, к сожалению, я понял, что не существует никакого "le git" способа выполнить ваши требования. Обратный вызов @blur будет называться несмотря ни на что. Невозможно отрегулировать это поведение.

Обходной путь: некоторый аспект блокировки с временем восстановления ...

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
  blocked: false,
  value: { language: 'JavaScript', library: 'Vue-Multiselect' },
  options: [
    { language: 'JavaScript', library: 'Vue.js' },
    { language: 'JavaScript', library: 'Vue-Multiselect' },
    { language: 'JavaScript', library: 'Vuelidate' }
  ]
},
  methods: {
    toggle () {
      if (!this.blocked) {
        this.$refs.multiselect.toggle();
      }
    },
    block () {
      this.blocked = true;
      setTimeout(() => {
        this.blocked = false;
      }, 200);
    }
  }
}).$mount('#app')

Answer 2

Проблема в том, что VueMultiselect закрывается при щелчке за пределами компонента.

Поэтому, когда вы нажимаете кнопку щелчка (на вашей мыши), VueMultiselect закрывается и когда вы отпускаете кнопку щелчка Вы действительно открываете VueMultiselect, поскольку isOpen было установлено в false в событии close.

Таким образом, ваша кнопка может быть только кнопкой Открыть.

Редактировать:

Лучшим решением было бы скрыть кнопку при открытом VueMultiselect.