Как правильно использовать кастомный селект в проекте с Vue.js, чтобы Vue реагировал на изменение селекта?
Есть свой селект, который скрывает стандартный селект и поверх него делает кастомный, хотел засунуть его в проект с Vue, чтобы не переделывать его:
<select name="nationality" v-model="national">
<option value="russia">Российская федерация</option>
<option value="belarus">Беларусь</option>
<option value="ukraine">Украина</option>
<option value="kazakhstan">Казахстан</option>
</select>
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('<div class="select"></div>');
$this.after('<div class="select-styled"></div>');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$styledSelect.attr('rel', $(this).attr('rel'));
$this.val($(this).attr('rel'));
$list.hide();
$this.trigger('changed');
});
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
В обычном селекте все норм меняется в Vue, но не понимаю как отслеживать изменение в кастомном селекте. У меня в html-коде кастомного селекта нет. В html у меня селект стандартный, а при помощи скрипта и стилей создается кастомный в DOM. Получается, что на дивы от кастомного селекта нельзя ничего повесить в html.
Ответы (1 шт):
Если вы хотите обернуть во что-то стандартный селект и скрыть логику - то создайте обёртку в виде компонента Vue, в котором вы проведёте все изменения явно без использования jq, после чего используйте созданный компонент в проекте вместо стандартного селекта.