0

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)
            }
        }
    }

1 ответ 1

0

Используйте @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/[email protected]"></script>

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.