How can I set selected option selected in vue js 2

Question

My component vue is like this     lt template gt       lt select class  form-control  v-model  selected   required  change  changeLocation  gt           lt option  selected gt Choose Province lt  option gt           lt option v-for  option in options  v-bind value  option id   gt    option name    lt  option gt       lt  select gt   lt  template gt    I use this    lt option  selected gt Choose Province lt  option gt  to selected  But whene executed  on the gulp watch exist error  The error like this       ERROR in       vue-loader lib template-compiler js id data-v-53777228     vue-load   er lib selector js type template amp index 0   resources assets js components bootst   rap LocationBsSelect vue Module build failed  SyntaxError  Unexpected   token  28 4    Seems my step is wrong  How can I solve it

User · Answer

The simplest answer is to set the selected option to true or false.

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

Where the data object is:

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

This is an example to set the selected month day:

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

On your data set:

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

User · Answer

Handling the errors  You are binding properties to nothing   required in    lt select class  form-control  v-model  selected   required  change  changeLocation  gt    and  selected in   lt option  selected gt Choose Province lt  option gt    If you set the code like so  your errors should be gone    lt template gt     lt select class  form-control  v-model  selected   required  change  changeLocation  gt       lt option gt Choose Province lt  option gt       lt option v-for  option in options  v-bind value  option id   gt    option name    lt  option gt    lt  select gt   lt  template gt    Getting the select tags to have a default value   you would now need to have a data property called selected so that v-model works  So       data          return         selected   Choose Province               If that seems like too much work  you can also do it like    lt template gt     lt select class  form-control   required  true   change  changeLocation  gt      lt option  selected  true  gt Choose Province lt  option gt      lt option v-for  option in options  v-bind value  option id   gt    option name    lt  option gt     lt  select gt   lt  template gt       When to use which method    You can use the v-model approach if your default value depends on some data property  You can go for the second method if your default selected value happens to be the first option  You can also handle it programmatically by doing so    lt select class  form-control   required  true  gt     lt option     v-for  option in options      v-bind value  option id      selected  option      lt the default value you want gt       gt    option    lt  option gt   lt  select gt

User · Answer

lt select v-model  challan warehouse id  gt   lt option value    gt Select Warehouse lt  option gt   lt option v-for  warehouse in warehouses  v-bind value  warehouse id    gt        warehouse name     lt  option gt      Here  challan warehouse id  come from  challan  object you get from   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

User · Answer

You simply need to remove v-bind     from selected and required attributes  Like this  -   x000D   x000D   lt template gt  x000D       lt select class  form-control  v-model  selected  required  change  changeLocation  gt  x000D           lt option selected gt Choose Province lt  option gt  x000D           lt option v-for  option in options  v-bind value  option id   gt    option name    lt  option gt  x000D       lt  select gt  x000D   lt  template gt  x000D   x000D   x000D    You are not binding anything to the vue instance through these attributes thats why it is giving error

[javascript] How can I set selected option selected in vue.js 2?

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component