web-dev-qa-db-fra.com

espace réservé pour select dans vuejs 2.0.0

Je crée une webapp en utilisant vuejs 2. . J'ai créé une entrée de sélection simple en utilisant le code suivant:

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

et je l'ai dans data de mon composant Vue:

data () {
  return {
    age: "",
  }
},
watch: {      
  age: function (newAge) {
    console.log("log here")
  }

Mais je commence à obtenir cette erreur lors de l'ajout de la valeur par défaut pour select:

ERREUR dans ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ Composants/Erreur de syntaxe du modèle cde.vue: les attributs sélectionnés en ligne seront ignorés lors de l'utilisation de v-model. Déclarez plutôt les valeurs initiales dans l'option de données du composant.

@ ./src/components/cde.vue 10: 23-151

@ ./~/babel-loader!./~/vue-loader/lib/selector.js? type = script & index = 0! ./ src/views/abcView.vue @ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@ multi app

J'ai également essayé de donner une valeur par défaut dans la section des données du composant, mais rien ne s'est produit. J'ai essayé v-bind mais aussi les observateurs ont cessé de travailler sur la variable d'âge.

javascriptselectvue.jsvuejs2
17
Saurabh

La seule chose nécessaire pour cela était de supprimer selected de la valeur par défaut option:

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

Pour d'autres qui pourraient atterrir sur cette question, il y avait une étape supplémentaire pour moi pour que l'option par défaut apparaisse. Dans mon cas, le v-model J'étais lié à renvoyait null et non une chaîne vide. Cela signifiait que l'option par défaut n'était jamais sélectionnée une fois Vue étaient activées.

Pour résoudre ce problème, liez simplement la propriété value de votre option par défaut à null:

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

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

21
Albert Martin