Ответ 1
Единственное, что нужно для работы, это удалить selected по умолчанию option:
<select v-model="age">
<option value="" disabled hidden>Select Age</option>
.....
</select>
Заполнитель для выбора в vuejs 2.0.0
Я создаю webapp, используя vuejs 2.0. Я создал простой ввод с использованием следующего кода:
<select v-model="age">
<option value="" disabled selected hidden>Select Age</option>
<option value="1"> 1 Year</option>
<option value="11"> 11 Year</option>
</select>
и у меня это в data моего компонента Vue:
data () {
return {
age: "",
}
},
watch: {
age: function (newAge) {
console.log("log here")
}
Но я начинаю получать эту ошибку при добавлении значения по умолчанию для выбора:
ОШИБКА в./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./SRC/компоненты/cde.vue ошибка синтаксиса шаблона: встроенные выбранные атрибуты будут игнорироваться при использовании v-модели. Вместо этого объявляйте начальные значения в параметре данных компонента.
@./src/components/cde.vue 10: 23-151
@./~/babel-loader!./~/vue-loader/lib/selector.js? тип = script &! Индекс = 0./ЦСИ/просмотров/abcView.vue @./src/views/abcView.vue
@./src/router/index.js
@./src/app.js
@./src/client-entry.js
@multi app
Я попытался указать значение по умолчанию в разделе данных компонента, но потом ничего не произошло. Я также пробовал v-bind, но затем наблюдатели перестали работать с возрастной переменной.
Ответы
Ответ 2
Для других, кто может приземлиться на этот вопрос, мне был добавлен дополнительный шаг, чтобы я мог получить параметр по умолчанию. В моем случае, v-model, с которым я связывался, возвращал null, а не пустую строку. Это означало, что параметр по умолчанию никогда не выбирался после того, как привязаны Vue.
Чтобы решить эту проблему, просто привяжите свойство value вашего значения по умолчанию к null:
<select v-model="age">
<option :value="null" disabled>Select Age</option>
...
</select>