Mi componente vue es así:

<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 esto : <option :selected>Choose Province</option> a seleccionado

Pero cuando se ejecuta, en el reloj de trago existe un error

El error como este:

ERROR en ./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue-load er/lib/selector.js?type=template&index=0!./resources /assets/js/components/bootst rap/LocationBsSelect.vue Falló la compilación del módulo: SyntaxError: Token inesperado (28:4)

Parece que mi paso es incorrecto

¿Cómo puedo resolverlo?

Manejo de los errores

Estás vinculando propiedades a nada. :required en

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

y :selected en

<option :selected>Choose Province</option>

Si configura el código así, sus errores deberían desaparecer:

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

Conseguir que las etiquetas seleccionadas tengan un valor predeterminado

1. ahora necesitarías tener un data propiedad llamada selected para que v-model funcione. Entonces,

   {
     data () {
       return {
         selected: "Choose Province"
       }
     }
   }
   

2. Si eso parece demasiado trabajo, también puede hacerlo así:

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

¿Cuándo usar qué método?

1. Puedes usar el v-model enfoque si su valor predeterminado depende de alguna propiedad de datos.

2. Puede optar por el segundo método si su valor predeterminado seleccionado resulta ser el primero option.

3. También puede manejarlo programáticamente al 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>
   

La respuesta más simple es establecer la opción seleccionada en 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 configurar el día del mes seleccionado:

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

En su 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
    }
}

<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” proviene del objeto “challan” que obtienes:

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;
  }); 
 }

Simplemente necesita eliminar v-bind (:) de los atributos seleccionados y requeridos. Como esto :-

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

No está vinculando nada a la instancia de vue a través de estos atributos, por eso está dando un error.

Mi código para multiselección reactiva

data() {
    return {
        article: {title: 'aaaaa', 'categoriesIds': [1,3], ...},
        selectCategories: {1: 'xxx', 2: 'www', 3: 'yyy', 4: 'zzz'},
    }
},

plantilla

<div class="form-group">
     <label for="content">Categories</label>
     <select name="categories" 
         v-model="article.categoriesIds" 
         id="categories" 
         multiple 
         class="form-control col-md-5" 
         size="6">
         <option v-for="(category, key) in selectCategories" 
             :key="key" 
             v-bind:value="key">{{category}}</option>
     </select>
</div>

Los elementos seleccionados se vinculan a la artículo.categoriesIds formación.

Otra forma, que a menudo encuentro más confiable, es que podría agregar una directiva a su app.js o donde sea que esté iniciando su VueJS, por ejemplo:

Vue.directive('attr', (el, binding) => {
  if (binding.value === true) binding.value=""
  if (binding.value === '' || binding.value) {
    el.setAttribute(binding.arg, binding.value)
  }
})

A continuación, puede utilizar v-attr para establecer un atributo, por ejemplo:

<option value="Western Australia" v-attr:selected="form.state == 'Western Australia'">Western Australia</option>

Entonces, según tengo entendido, el objetivo principal es establecer “Elegir provincia” como predeterminado. Probé otras opciones, pero la simple me funcionó mejor:

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