Mi componente vue es como este :

<template>
    <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option :selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

Yo uso este : <option :selected>Choose Province</option> seleccionados

Pero whene ejecutado, en el trago de ver existir error

El error como este :

ERROR en
./~/vue-loader/lib/plantilla-compilador.js?id=datos-v-53777228!./~/vue-carga
er/lib/selector.js?tipo=plantilla&index=0!./recursos/assets/js/componentes/bootst
rap/LocationBsSelect.vue Módulo de construir error: SyntaxError: Inesperado
token (28:4)

Parece que mi paso es incorrecto

¿Cómo puedo solucionarlo?

InformationsquelleAutor samuel toh | 2017-05-08

3 Comentarios

  1. 30

    El manejo de los errores

    Que son propiedades de unión a la nada. :required en

    <select class="form-control" v-model="selected" :required @change="changeLocation">

    y :selected en

    <option :selected>Choose Province</option>

    Si establece el código como tal, sus errores debe ser pasado:

    <template>
      <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
     </select>
    </template>

    Llegar al seleccionar las etiquetas que tienen un valor por defecto

    1. que ahora necesitaría tener un data propiedad llamada selected de modo que v-modelo funciona. Así,

      {
        data () {
          return {
            selected: "Choose Province"
          }
        }
      }
    2. Si parece demasiado trabajo, también se puede hacer como:

      <template>
        <select class="form-control" :required="true" @change="changeLocation">
         <option :selected="true">Choose Province</option>
         <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
        </select>
      </template>

    Cuando se utilice el método?

    1. Puede utilizar el v-model enfoque si el valor predeterminado depende de algunos datos de la propiedad.

    2. Usted puede ir para el segundo método si su valor predeterminado valor seleccionado pasa a ser la primera option.

    3. También puede controlar mediante programación por hacerlo:

      <select class="form-control" :required="true">
        <option 
         v-for="option in options" 
         v-bind:value="option.id"
         :selected="option == '<the default value you want>'"
        >{{ option }}</option>
      </select>
    • Este :selected="option == '<the default value you want>'" me ayudó mucho. Gracias.
    • Venugopal, he probado este <option v-for="recipe in recipes" :selected="option == 'Sugar Cookies (Default)'">{{ recipe }}</option> pero la primera opción es todavía en blanco en la lista de selección. Te lo publicaremos violín que muestra cómo funciona esto?
  2. 16

    La respuesta más simple es establecer la opción seleccionada para true o false.

    <option :selected="selectedDay === 1" value="1">1</option>

    Donde el objeto de datos es:

    data() {
        return {
            selectedDay: '1',
            //[1, 2, 3, ..., 31]
            days: Array.from({ length: 31 }, (v, i) => i).slice(1)
        }
    }

    Este es un ejemplo para establecer el mes seleccionado día:

    <select v-model="selectedDay" style="width:10%;">
        <option v-for="day in days" :selected="selectedDay === day">{{ day }}</option>
    </select>

    El conjunto de datos:

    {
        data() {
            selectedDay: 1,
            //[1, 2, 3, ..., 31]
            days: Array.from({ length: 31 }, (v, i) => i).slice(1)
        },
        mounted () {
            let selectedDay = new Date();
            this.selectedDay = selectedDay.getDate(); //Sets selectedDay to the today's number of the month
        }
    }
    • Esto funciona, pero no a causa de la :selected enlaces. El uso de v-model significa que cualquier checked, value, y selected atributos son ignorados. Por favor, consulte uso básico aquí, donde esta haciendo caso omiso de los atributos específicos se describe – vuejs.org/v2/guide/forms.html
    • También puede utilizar la versión corta: :selected="selectedDay === 1"
    • cuando el uso de un componente cuya lista de opciones es dinámicamente obtenidos en el monte, la v-model no parece funcionar. Esta solución es la única que he encontrado hasta ahora trabajando en ese escenario.
    • Una persona también puede acortar el que por alguna lógica similar a este: this.days = [...Array(31)]; y, a continuación,<option v-for="(_, day) in days" :selected="selectedDay === day">{{ day }}</option>. Buena suerte ahí fuera.
    • Con eso dicho, yo creo que una persona debe también probable que el uso de una biblioteca para la selección de fecha debido a que la persona va a entrar en un mundo de dolor al intentar iniciar la contabilidad de días en el mes y los años bisiestos. Es un bien caracterizado problema posiblemente el mejor de la izquierda a una biblioteca que ya tiene las pruebas de unidad y una buena API.
  3. 6
    <select v-model="challan.warehouse_id">
    <option value="">Select Warehouse</option>
    <option v-for="warehouse in warehouses" v-bind:value="warehouse.id"  >
       {{ warehouse.name }}
    </option>

    Aquí «challan.warehouse_id» viene de «challan» el objeto de obtener a partir de:

    editChallan: function() {
        let that = this;
        axios.post('/api/challan_list/get_challan_data', {
        challan_id: that.challan_id
     })
     .then(function (response) {
        that.challan = response.data;
     })
     .catch(function (error) {
        that.errors = error;
      }); 
     }
    • Mientras que este código puede responder a la pregunta, proporcionar contexto adicional sobre cómo y/o por qué se resuelve el problema podría mejorar la respuesta del valor a largo plazo.
    • hey man gracias por la ayuda

Dejar respuesta

Please enter your comment!
Please enter your name here