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