Не срабатывает click vue

119

09 января 2021, 00:20

https://codepen.io/n_ds/pen/VOxVrE Не работает selectItem(), связано это как-то с onBlur(), но не могу понять как решить


    <div class="m-select">
        <div class="m-select__search">
            <span class="search__dropdown-ico">
                <i class="fa fa-sort-desc"></i>
            </span>
            <input type="text"
                    name=""
                    placeholder="город"
                    @focus="onFocus()"
                    @blur="onBlur()">
        </div>
        <div v-if="isVisibleDropdown" class="m-select__dropdown-list">
            <ul>
                <li v-for="city in cities">
                    <span @click="selectItem(city.name)">
                        {{ city.name }}
                    </span>
                </li>
            </ul>
        </div>
    </div>


    export default {
        data() {
            return {
                isVisibleDropdown: true,
                cities: [
                    {
                        name: 'Москва'
                    },
                    {
                        name: 'Самара'
                    },
                    {
                        name: 'Казань'
                    }
                ]
            }
        },
        methods: {
            onFocus() {
                this.isVisibleDropdown = true
            },
            onBlur() {
                this.isVisibleDropdown = false
            },
            selectItem(name) {
                alert(name)
            }
        }
    }

Answer 1

Используйте @mousedown вместо @click. Его часто применяют при создании typeahead элементов.

// Отключим ненужные для примера 
// сообщения в консоли. 
Vue.config.productionTip = false 
Vue.config.devtools = false 
 
new Vue({ 
  el: '#app', 
  data: { 
    isVisibleDropdown: false, 
    city: '', 
    cities: [{ 
      name: 'Москва' 
    }, { 
      name: 'Самара' 
    }, { 
      name: 'Казань' 
    }] 
  }, 
  methods: { 
    onFocus(event) { 
      this.isVisibleDropdown = true 
    }, 
    onBlur(event) { 
      this.isVisibleDropdown = false 
    }, 
    selectItem(name) { 
      this.city = name 
      this.isVisibleDropdown = false 
    } 
  } 
})

<div id="app"> 
  <div class="m-select"> 
    <div class="m-select__search"> 
      <span class="search__dropdown-ico"><i class="fa fa-sort-desc"></i></span> 
      <input type="text" placeholder="Город" v-model="city" @focus="onFocus" @blur="onBlur" /> 
    </div> 
    <div v-if="isVisibleDropdown" class="m-select__dropdown-list"> 
      <ul> 
        <li v-for="city in cities"> 
          <span @mousedown="selectItem(city.name)" style="cursor:pointer">{{ city.name }}</span> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>