CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
samuel toh
samuel toh

Reputation: 7086

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

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?

Upvotes: 78

Views: 299056

Answers (8)

Ali01
Ali01

Reputation: 11

You can make as follow using v-model in the select tag and using library useForm from vue and make the default value of form.category = choose or any default value you want.

<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
const form = useForm({
    category: 'choose',
    file: null,
});
</script>

<template>

                    <div class="grid grid-cols-1 gap-5">
                        <label for="category" class="font-black">Choose A Category</label>
                        <select id="category" v-model="form.category" required >
                            <option value="choose" disabled>choose</option>
                            <option value="Other">other</option>
                        </select>
                        <div class="bg-red-200 rounded-lg p-2" v-if="form.errors.category">
                            {{ form.errors.category }}
                        </div>
                    </div>


</template>

Upvotes: 0

Azamat Uzbekov
Azamat Uzbekov

Reputation: 150

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>

Upvotes: 0

Čamo
Čamo

Reputation: 4172

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.

Upvotes: 2

Grant
Grant

Reputation: 6347

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>

Upvotes: 1

Aafiya Hanafi
Aafiya Hanafi

Reputation: 156

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.

Upvotes: 11

gtamborero
gtamborero

Reputation: 3212

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

Upvotes: 61

leaveme_alone
leaveme_alone

Reputation: 686

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

Upvotes: 13

Amresh Venugopal
Amresh Venugopal

Reputation: 9549

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>

Upvotes: 83

Related Questions