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
Related
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.
UPDATED
select input's selected option is not working if I use v-model on select.
<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
<option selected value="">--all--</option>
<option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>
if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.
Use selected attribute
https://www.w3schools.com/tags/att_option_selected.asp
<select class="select" v-model="searchCity">
<option value="" selected>--全部--</option>
<option :value="item" v-for="item in uniqueCity">{{item}}</option>
</select>
Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this:
<select>
<option value="" selected disabled hidden>Select country here</option>
<option value="1">Bulgaria</option>
<option value="2">Serbia</option>
<option value="3">Cyprus</option>
</select>
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
I have a form which requires phone numbers with country code.
In select tag, when dropdown it should have Country name and Country code but when selected, it should be country code only. Is that possible?
Here's my code
<select v-model="country" data-vv-as="Country" name="country" v-validate="'required'" :class="{'select': true, 'is-danger': errors.has('register-form.country')}" data-vv-scope="register-form">
<option disabled selected>--</option>
<option v-for="country in countries" :value="country.id"
:key="country.id">{{country.name}} (+{{ country.calling_code }})
</option>
</select>
Thanks!
You shouldn't use v-model="country" and then use same variable name in v-for="country in countries" so use something like v-model="selectedCountry"
You need to pass country code as an option's value and not it's id.
<option v-for="country in countries" :value="country.calling_code"
:key="country.id">{{country.name}} (+{{ country.calling_code }})
</option>
What is the correct way to bind a select element to an object (rather than a string value) but still have the HTML element submit a string value?
I've managed to get this working, but it almost seems like I'm exploiting a bug:
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" v-bind:value="item" value="{{ item.id }}">{{ item.name }}</option>
</select>
This works as intended: the "selected" property is attached to the "item" object, but the form POSTs just the item's ID. However, if I reverse the order of the HTML attributes, so that value={{ item.id }} comes before v-bind:value="item", then the form POSTs "[Object]" rather than, e.g., "3".
The fact that it's so fragile makes me think I'm doing something wrong.
So what's the right way to handle this?
I had a similar situation in which I built several vue components that could be used both within a vue component or within a standard form.
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" :value="JSON.stringify(item)">{{ item.name }}</option>
</select>
Appears to be what you are after. I also had success using a computed property or filter but I decided that stringify was most readable.
I fixed it by using this approach:
<select v-model="product">
<option v-for="obj in choices" :value="obj">{{ obj.name }}</option>
</select>
<input type="hidden" name="product" :value="choice.id">
In summary: don't give your select a name but give that name to your hidden input and provide the ID as value on that element instead.
I see in both the cases, HTML being rendered as following:
<select>
<option value="[object Object]">name1</option>
<option value="[object Object]">name2</option>
<option value="[object Object]">name3</option>
<option value="[object Object]">name4</option>
</select>
Case 1 : v-bind:value="item" value="{{ item.id }}" : fiddle
Case 2 : value="{{ item.id }}" v-bind:value="item" : fiddle
So both the cases are equivalent as far as HTML being rendered. Ideal way to do it without confusion will be just using v-bind:value="item" like following:
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" v-bind:value="item">{{ item.name }}</option>
</select>
You should v-bind to item or item.id depending on what you want to assign to selected variable.