Установка выбранного по умолчанию значения в выпадающем меню select Vue.Js

Question

У меня проблема с получением значения по умолчанию с помощью выбора в VueJs. Я пытался в двух случаях:

1. Передача полей id и v-model в качестве:

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

В этом случае выбранное значение по умолчанию будет пустым.

2. Передача 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. Кто-нибудь, пожалуйста, помогите с этим:

Answer 1

Обновление sort_brand для всех в created хуке, который установит опцию, будет иметь значение «все» по умолчанию:

created (){
 this.sort_brand = 'all';
}

Вы также можете инициализировать модель в самих данных.

data (){
 return {
  sort_brand : 'all'
 }
}

Answer 2

Ответы выше (например, @Lunfel) работают, если ваши значения выбора просты (ноль, «Все» и т. Д.). Если ваша комбинация связана со сложными объектами 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.

Answer 3

Vue.js будет манипулировать выбранным атрибутом на основе v-модели выбора и значения опции.Таким образом, попытка установить выбранный атрибут не будет работать.

Для вашей опции «Все» вы можете присвоить значение null следующим образом:

<option :value="null">All(Brands)</option>

И затем установить sort_brand переменная до null.Тогда vue.js будет сопоставлять null sort_brand с параметром с нулевым значением.

Примечание: я использовал null здесь, потому что я обычно это делаю, но я мог использовать любое другое значение.Вы также можете использовать строку 'all'.