Estoy creando una aplicacion web utilizando vuejs 2.0. He creado sencillo seleccionar la entrada usando el siguiente código:

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

y tengo esto en data de mi Vue componente:

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

Pero empiezo a tener este error al agregar valor predeterminado para seleccionar:

ERROR en ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cde.vue
plantilla de error de sintaxis :
en línea atributos seleccionados serán ignorados cuando el uso de v-modelo. Declarar valores iniciales en el componente de datos de la opción.

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

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

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@ multi app

Traté de darle valor predeterminado en la sección de datos del componente así, pero luego no pasó nada. Traté de v-bind también, pero luego de los vigilantes ha dejado de trabajar en la edad variable.

  • jsfiddle.net/vjvMp/668 Parece funcionar bien
  • Sí, funcionó cuando me he quitado seleccionado de entre las opciones predeterminadas. Gracias @haim770
InformationsquelleAutor Saurabh | 2016-11-02

2 Comentarios

  1. 21

    La única cosa necesaria para que funcione esta era quitar selected de defecto option:

     <select v-model="age">
        <option value="" disabled hidden>Select Age</option>
        .....
      </select>
    • Sí, si quieres algo para ser pre-seleccionado, debe establecer el valor como this.age="1", que se traduce en «1 Año» para ser seleccionado automáticamente cuando el DOM renders.
  2. 21

    A los demás que pueden ser de aterrizaje en esta pregunta, hay un paso adicional para que me de la opción predeterminada para aparecer. En mi caso, la v-model yo era vinculante para regresar null y en lugar de una cadena vacía. Esto significaba que la opción predeterminada nunca fue seleccionada una vez Vue enlaces de una patada en.

    Para resolver esto, simplemente enlazar la value propiedad de su opción predeterminada para null:

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

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

    • Plus: añadir movilidad, y las propiedades ocultas puede ocultar el marcador de posición de la lista de opciones. por ejemplo, <opción :valor=»null» movilidad hidden>Seleccione Edad</opción>

Dejar respuesta

Please enter your comment!
Please enter your name here