I have a select with v-model, but I need to set the selected option based on other values.
Is it possible?
This is what I've tried:
<div class="form-group">
<label for="">Category</label>
<select class="form-control" v-model="product.category">
<option v-for="(c, index) in categories" :value="c.id" :selected="product.category.id == c.id" :key="index">
{{ c.name }}
</option>
</select>
</div>
However, :selected seems to have no effect.
Just modify the v-model from
v-model="product.category"
to
v-model="product.category.id"
and remove
:selected="product.category.id == c.id"
You can read more about Form Input Bindings.
Related
I have a website that uses a filtering system built in Vue.js, it filters properties with "states", "cities" and "type", the code looks like this, it works for states and types but not for cities which come from an Object rather than an Array. I am not sure how to acces the value inside of the Object.
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<label for="property-state">STATE</label>
<select name="property-state" #change="search()" id="property-state">
<option value="">Select</option>
<option v-for="val in terms['property-state']" :value="val.id">{{ val.name }}</option>
</select>
</div>
<div class="cell medium-auto">
<label for="city">CITY</label>
<select name="city" #change="search()" id="city">
<option value="">Select</option>
<option v-for="val in terms ['location']" :value="val.id">{{ val.city }}</option>
</select>
</div>
<div class="cell medium-auto" #change="search()">
<label for="property-type">PROPERTY TYPE</label>
<select name="property-type" id="property-type">
<option value="">All types</option>
<option v-for="val in terms['property-type']" :value="val.id">{{ val.name }}</option>
</select>
</div>
</div>
I am aware that I'm trying to access "location" as if it were an Array but not sure how to do it as it is an Object as seen in the image attached.
The data I am trying to access is structured as follows:
location (Object)
|
city: "cityName"
In Vue, v-for treats an object and an array in the same way. An array has the same type of values, but an object has a structure that could be different. Use computed properties to save your city name into an array.
https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object
Maybe I'm going about this the wrong way ... but I'm trying to use a v-for loop to duplicate/remove a custom component x times. x is decided by a <select> field above. What I have works on the initial page load, but then when you select a different option, only one custom component is displayed (although x is updated). Does anyone have any idea what I am doing wrong?
// here is the select field that defines the number of enrolling students
<select name="number_students_enrolling" v-model="formFields.numberStudentsEnrolling">
<option value="" default selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// here is the custom component I'm trying to duplicate/remove dynamically
<div class="students-container">
<student v-for="n in formFields.numberStudentsEnrolling" :key="n" v-bind:index="n" >
</student>
</div>
// here is the custom component
Vue.component('student', {
props: ["index"],
template: `
<div class="input--student">
<div class="input--half">
<label>
<span class="d-block">
Student {{ index }} Name <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
<div class="input-wrap input--half">
<label>
<span class="d-block">
Student {{ index }} DOB <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
</div>
`
})
// Here is the Vue.js instance
var test = new Vue({
el: '#test',
data: {
formFields: {
numberStudentsEnrolling: 3
}
}
});
v-for needs a Number, but you're giving it a string (the selected value). Convert it to a Number so v-for will treat it as a range from 1 to N:
<div class="students-container">
<student
v-for="n in Number(formFields.numberStudentsEnrolling)"
:key="n"
v-bind:index="n">
</student>
</div>
For completeness, another approach (per #HusamIbrahim) is to annotate the v-model reference with .number, which will automatically do the conversion.
<select
name="number_students_enrolling"
v-model.number="formFields.numberStudentsEnrolling"
>
Here's a codesandbox: https://codesandbox.io/s/xzy6or9qo
How can I bind a value selected with aurelia?
I have this select bellow:
<select id="user" class="form-control" value.bind="filters[0].value" change.delegate="userDropdownChanged(filters[0].value)">
<option repeat.for="user of users" model.bind="user.uuid">${user.name}</option>
</select>
I tried bind the value, but it is showing the whole list of the select, it is a way to show just the user selected in my h1?
<h1 repeat.for="user of users" model.bind="user.uuid">${user.name} </h1>
If you do the following:
<select value.bind="selectedUser">
<option repeat.for="user of users" model.bind="user.uuid">${user.name}</option>
</select>
The value selected in your <select> will be bound to a variable in your viewmodel called selectedUser.
You can then bind that to your <h1> like so:
<h1>${selectedUser.name}</h1>
When i alert(this.property_credentials.district) in vue.js i get empty
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
<option value="0">--Please select your district</option>
#foreach($districts as $district)
<optgroup label="{{$district->district}}">
#foreach($district->regions as $region)
<option value={{ $region}} {{ (old("district") == $region? 'selected':'') }}>{{ $region}}</option>
#endforeach
</optgroup>
#endforeach
How can i pass this value $region to vue.js ?
The syntax of looping is wrong, there is no #foreach in vuejs, you will have to use v-for to loop in the template. It should be something like:
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
<option value="0">--Please select your district</option>
<div v-for="district in $districts">
<optgroup label="{{district->district}}">
<div v-for="region in district.regions">
<option value={{region}} {{ (old("district") == region? 'selected':'') }}>{{ $region}}</option>
</div>
</optgroup>
</div>
You are mixing two different syntax together, you are using blade code with VueJs. data binding will be wrong.
What you need to do is to bind the value from laravel to a variable that vuejs can consume, something like this
Laravel blade
<script>
// this must be a json value
window.districts = {{$districts}}
</script>
In your VueJS code you need to bind this value to your data array, then you can use it
I have cities object which contains city.name and city.id. Also I have cameras object which has city_id: cameras.city_id. In my html:
<div v-for="camera in cameras">
<select v-model="camera.city_id" class="form-control">
<option v-for="city in cities" selected>#{{ city.name }}</option>
</select>
</div>
I have to recognize which element of object should be marked as selected, simply said mark element as selected if city.id == camera.city_id. It will be true only once per loop. How do I manage that? Thanks.
You should be using value on the options like this:
<div v-for="camera in cameras">
<select v-model="camera.city_id" class="form-control">
<option v-for="city in cities" :value="city.id">#{{ city.name }}</option>
</select>
</div>
Done that way, the proper option will automatically be selected for you by the v-model directive.
See this for more information: http://vuejs.org/guide/forms.html#Select