Reputation: 7086
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
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
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
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
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
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
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
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
Reputation: 9549
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>
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:
<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>
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:
<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