I have a Vue component for form and there is a dropdown in that form as follows,
<select class="block appearance-none w-full"v-model="this.languages" name="language_id">
<option v-for="language in languages" v-bind:value="(lan.id === language.id) ? lan.id : language.id" :selected= "lan.name"> {{ language.name }}
</option>
</select>
It is using the same vue component for both create & edit. In edit, there should be editing item's value (declared it as lan) as selected option in dropdown. I have tried as above & it don't have selected value. what is the wrong with my method?
Thank you!
Fortunately I found the answer. it is as follows,
<select class="block appearance-none w-full" v-model="lan.id" name="language_id">
<option v-for="language in languages" v-bind:value="(lan.id === language.id) ? lan.id : language.id"
</option>
</select>
I have placed item's value in v-model.
Related
Context
I have a form built fully using a livewire component because I need to bind several inputs to do real-time calculations. I expect the dropdown items not to change, but the text input fields need to be dynamic.
Problem
when I enter a value into a binded <input> field, the previously selected items in the <select> dropdown gets reset.
Gif of the issue:
()
I tried using the "old('VALUE')" function, but it appears to have no effect.
This is the code of "project" selector input (The stage selector code is identical):
<select id="range_project_id" name="project_id" value="{{ old('project_id') }}"
class="px-2 form-select" disabled form="create-land-registry-form">
<option selected>Choose a project..</option>
<option disabled>{ID}:{Name}</option>
#foreach (App\Models\Project::all() as $project)
<option value="{{ $project->id }}">
{{ $project->id . ': ' . $project->name }}
</option>
#endforeach
</select>
This is the code of one of the range selectors:
<div class="row">
<input wire:model.lazy="landRangeStart" type="text" name="land_id_start"
id="land_range_start" disabled form="create-land-registry-form"
class="col-3 form-control-lg border mx-2" placeholder="Starting from"
value="{{ old('land_id_start') }}" />
</div>
I tried using the "old('VALUE')" function, but it appears to have no effect.
In the parent div, add wire:ignore.self.
For example:
<div wire:ignore.self><-- Parent div -->
//Your other dropdown code in here
</div>
This directive tells Livewire to ignore changes to a subset of HTML within your component.
As you are using the raw HTML select and not a third party library, like Select2, my question is, why not bind the select value to the livewire component like so?
This would solve your problem and the component would be aware of the value from the get go.
Hye,
I want to get dropdown selected data.
For your information, my dropdown data is from my database. I already retrieve data from database and put it inside my dropdown.
Right now, I want to make validation. If user key in all information and forgot to key in 1 column data, the dropdown part should get the previous selected data right? So here are my coding, I still can get the previous selected data.
<div>
<x-label for="pizzatype" :value="__('Choose pizza type:')" />
<select name="pizzatype" id="pizzatype">
<option selected disabled>Please choose</option>
#foreach ($pizzainfo as $pizzaitem)
<option value="{{ old('$pizzaitem->name') }}">{{ $pizzaitem->name }}</option>
#endforeach
</select>
</div>
All dropdown button should get the selected previous button...
As I understand the problem is that you are trying to get an old() value that does not exist...
the quick fix is :
<select name="pizzatype" id="pizzatype">
<option #if(!old('pizzatype')) selected #endif disabled>Please choose</option>
#foreach ($pizzainfo as $pizzaitem)
<option #if(old('pizzatype') == $pizzaitem->name) selected #endif value="{{ $pizzaitem->name }}">{{ $pizzaitem->name }}</option>
#endforeach
</select>
I have a select input that allows for multiple options to be selected. Because of the simple requirements, these selections are just stored as an array in my MySQL field. So for example they are stored as:
[Retail, Wholesale]
Now my question is, if I wanted the user to be able to edit the specific record, how would I pull the options up as selected in the select input?
The select field is as such:
<select class="form-control" name="type_industry">
<option value="Retail">Retail</option>
<option value="Wholesale">Wholesale</option>
<option value="Service">Service</option>
</select>
This is in a Laravel blade template, but if necessary I'm willing work with pure php answers or even javascript, I just need to be able to move past this issue.
Thanks!
You can use in_array() function,
<select class="form-control" name="type_industry">
<option value="Retail" #if(in_array("Retail", $selected_items_array)) selected #endif>Retail</option>
<option value="Wholesale" #if(in_array("Wholesale", $selected_items_array)) selected #endif>Wholesale</option>
<option value="Service" #if(in_array("Service", $selected_items_array)) selected #endif>Service</option>
</select>
if [Retail, Wholesale] is a php array ($savedOptions), and you have a list of all available options ($availableOptions) as another array, pass them to the blade view and in your blade just loop through:
#foreach ( $savedOptions as $value )
<option {{ in_array($value,$availableOptions) ? 'selected' : '' }} value={{ $value }}>{{ $value }}</option>
#endforeach
I'm having a user registration form with a select field, When ever I get an error on the form user redirected to the form and display the previously entered values
I able to display old values for the text fields but I am finding it difficult to display old values for the select field,
My select field as follows,
<select id="app-subdomainsuffix" class="form-control #error('subDomainSuffix') is-invalid #enderror" name="subDomainSuffix" aria-required="true">
<option value="">- {{ __('sentence.Select domains') }} -</option>
<option value="test.site" >TEST.SITE</option>
</select>
I'm using laravel 7
First of all you need value for each option and i don't see any value for your first option.
Then you need a logic to check if the option was selected and assign "selected Attribute" to HTML :
<select id="app-subdomainsuffix" class="form-control #error('subDomainSuffix') is-invalid #enderror" name="subDomainSuffix" aria-required="true">
<option value="value1" #if(old('subDomainSuffix') == "value1") selected #endif >- {{ __('sentence.Select domains') }} -</option>
<option value="test.site" #if(old('subDomainSuffix') == "test.site") selected #endif >TEST.SITE</option>
</select>
Above example can just demonstrate how to select the option, but for cleaner code you better come with array of option as mentioned in this topic .
<option value="test.site" {{ (old("subDomainSuffix") == 'test.site' ? "selected":"") }}>TEST.SITE</option>
Hi all I am trying to set the value of a dropdown to selected when the user goes to an edit page of my application but currently I am getting an error and I realise it is because I do not have the correct syntax.
This is my code:
<div class="form-group">
<label>Category</label>
<select name="category_id" id="cat_drop">
#foreach($cats as $cat)
<option value="{{$cat->id}} {{if($tip->category_id == $cat_id){ echo 'selected';} }}">{{$cat->name}}</option>
#endforeach
</select>
</div>
Basically Tips have a category_id and the dropdown allows a user to change the tip category. However I would like for the currently selected category_id to be set as the value of dropdown.
I am new to Laravel and the Blade Templating engine so would appreciate any help.
You can use a ternary if:
#foreach($cats as $cat)
<option value="{{$cat->id}}" {{($tip->category_id == $cat_id) ? 'selected':''}}>{{$cat->name}}</option>
#endforeach