web-dev-qa-db-fra.com

Comment définir l'option sélectionnée dans vue.js 2?

Mon composant vue ressemble à ceci:

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

J'utilise ceci: <option :selected>Choose Province</option> to selected

Mais lorsqu’il est exécuté, il ya erreur sur la montre.

L'erreur comme ceci:

ERREUR dans ./~/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 Échec de la construction du module: SyntaxError: Jeton inattendu (28: 4)

Semble que mon pas est faux

Comment puis-je le résoudre?

javascriptvue.jsvuejs2vue-component
32
samuel toh

Traiter les erreurs

Vous ne liez des propriétés à rien. :required dans

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

et :selected dans

<option :selected>Choose Province</option>

Si vous définissez le code comme suit, vos erreurs devraient disparaître:

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

Obtenir que les balises select aient une valeur par défaut

  1. vous devez maintenant avoir une propriété data appelée selected pour que v-model fonctionne. Alors,

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

  2. Si cela vous semble trop de travail, vous pouvez aussi le faire comme:

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

Quand utiliser quelle méthode?

  1. Vous pouvez utiliser l'approche v-model si votre valeur par défaut dépend de certaines propriétés de données.

  2. Vous pouvez choisir la deuxième méthode si la valeur sélectionnée par défaut est la première option.

  3. Vous pouvez également le gérer par programme en procédant ainsi:

    <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>
30
Amresh Venugopal

La réponse la plus simple consiste à définir l'option sélectionnée sur true ou false.

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

Où l'objet de données est:

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

Voici un exemple pour définir le jour du mois sélectionné:

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

Sur votre jeu de données:

{
    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
    }
}
16
gtamborero
<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>

Ici "challan.warehouse_id" vient de l'objet "challan" que vous obtenez:

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