Заполнитель для выбора в 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, но затем наблюдатели перестали работать с возрастной переменной.

Ответ 1

Единственное, что нужно для работы, это удалить selected по умолчанию option:

 <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>

Ответ 2

Для других, кто может приземлиться на этот вопрос, мне был добавлен дополнительный шаг, чтобы я мог получить параметр по умолчанию. В моем случае, v-model, с которым я связывался, возвращал null, а не пустую строку. Это означало, что параметр по умолчанию никогда не выбирался после того, как привязаны Vue.

Чтобы решить эту проблему, просто привяжите свойство value вашего значения по умолчанию к null:

<select v-model="age">
  <option :value="null" disabled>Select Age</option>
  ...
</select>

http://jsfiddle.net/2Logme0m/1/