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

Question

My component vue is like this:

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

I use this: <option:selected>Choose Province</option> 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&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?

Answer 1

Handling the errors

You are binding properties to nothing. :required in

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

and :selected in

<option :selected>Choose Province</option>

If you set the code like so, your errors should be gone:

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

Getting the select tags to have a default value

1. you would now need to have a data property called selected so that v-model works. So,

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

2. If that seems like too much work, you can also do it like:

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

---

When to use which method?

1. You can use the v-model approach if your default value depends on some data property.

2. You can go for the second method if your default selected value happens to be the first option .

3. You can also handle it programmatically by doing so:

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

Answer 2

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

Answer 3

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

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

Answer 4

You simply need to remove v-bind (:) from selected and required attributes. Like this :-

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

You are not binding anything to the vue instance through these attributes thats why it is giving error.

Answer 5

Another way, which I often find more reliable, is you could add a directive to your app.js or wherever you are initiating your VueJS, eg:

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

You can then utilise v-attr to set an attribute, eg:

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

Answer 6

My code for reactive multiselect

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

template

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

Selected items are binded to the article.categoriesIds array.

Answer 7

So as I understand the main goal is to set "Choose Province" as the default. I tried other options but the simple one worked for me the best:

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