Установка выбранного значения по умолчанию в раскрывающемся списке Vue.Js
У меня проблема с получением значения, выбранного по умолчанию, с помощью select в VueJs. Я пробовал в двух случаях:
- Передача полей id и v-model в select как:
<select v-model = "sort_brand" id = "sort-brand" class = "form-control">
<option value = "all" selected = "selected">All(Brands)</option>
<option v-for = "brand in brands" :value = "brand.id">{{ brand.name }}</option>
</select>В этом случае выбранное значение по умолчанию будет пустым.
- Передача sort_brand без идентификатора для выбора:
<select id = "brand-id" class = "form-control">
<option value = "all" selected = "selected">All(Brands)</option>
<option v-for = "brand in brands" :value = "brand.id">
{{ brand.name }}
</option>
</select>Выбранное значение по умолчанию заполняется, но тогда у меня нет привязки формы для VueJs. Кто-нибудь, пожалуйста, помогите с этим:
Ответы 3
Vue.js будет управлять выбранным атрибутом на основе v-модели выбора и значения параметра. Таким образом, попытка установить выбранный атрибут не будет работать.
Для опции «Все» вы можете назначить значение null следующим образом:
<option :value = "null">All(Brands)</option>
А затем установите для переменной sort_brand значение null. Затем vue.js сопоставит нулевой sort_brand с параметром с нулевым значением.
Примечание: здесь я использовал null, потому что я обычно это делаю именно так, но я мог бы использовать любое другое значение. Вы также можете использовать строку «все».
Спасибо @Lunfel за логику, я установил sort_brand на пустую строку, я изменил ее на 'все ', и теперь она работает нормально
Пустая строка должна работать, но у вас также есть e, чтобы явно установить значение как пустую строку в вашей опции <option value = ''> все бренды </option>
Обновите sort_brand для всех в ловушке created, которая установит для параметра значение 'all' по умолчанию:
created (){
this.sort_brand = 'all';
}
Вы также можете инициализировать модель в самих данных.
data (){
return {
sort_brand : 'all'
}
}
Приведенные выше ответы (например, @Lunfel) работают, если ваши значения выбора простые (null, «Все» и т. д.). Если ваша комбинация привязана к сложным объектам JSON, тогда очень сложно установить связанную переменную и позволить ей автоматически выбирать.
Мне было намного проще найти нужный вариант на основе отображаемого текста в смонтированной функции () с помощью JQuery, а затем установить атрибут selected. Как вы это делаете, зависит от вашей версии JQuery. В последних версиях (не уверен, когда он изменился, я использую 1.10.2) вы можете использовать что-то вроде:
$("#sort-brand option").filter(function () {
return $(this).prop("label") == 'All';
}).prop("selected", true);
Более старые версии JQuery не имеют функции prop (), но имеют несколько лучший селектор для функции find (). Пытаться:
$('#sort-brand').find('option[text = "All"]').attr('selected', 'selected');
См. Как выбрать вариант по тексту? для более подробного обсуждения выбора параметров раскрывающегося списка с помощью jQuery.
data: {}, а затем вы можете получить доступ к нему вездеthis.selectedв js илиselectedв html.