Level 104
Maybe because the client_id value is not one of the ids in the array of clients objects?
Jan 21, 2023
17
Level 1
Select tag shows nothing selected when v-model variable has a value
So I have a variable called client_id and has a value sent with a url parameter, and have a select like this:
<select @change="getClientLists($event)" v-model="client_id" id="client-list" name="client_id" v-if="client_id" class="selectpicker h-100 form-control shadow-none @error('client_id') is-invalid @enderror" data-live-search="true" required> <option v-for="client in clients" :value="client.id" :data-industry-id="client.industry_id" v-text="client.company_name"> </option>
the problem is that the select must show the v-model value as selected value, but sometimes it show "Nothing selected" instead
Level 1
@tykus It is, and sometimes it is selected as the page loads but sometimes it shows "Nothing selected"
Level 104
@Sting is it a timing issue, where does the data come from?
Level 1
@tykus no timing issue i think, see how is the select after loading the page, is selects the value but show "Nothing selected" https://imgur.com/a/TQYN1Uu
Level 35
Not sure if it will fix your case, but I don't see a key attribute on your option tag
Level 1
@Ben Taylor Sadly, it didn't
Level 35
Do you really want to fetch the client list every time you select a client? Looks to me as though you have a race condition. Why not populate the client list first. Then set the client Id for the select.
Level 1
@Ben Taylor Even if I do populate the clients list first the issue persist.
Level 1
I tried adding
:selected="client_id == client.id"
to the option tag and yet nothing changed
Level 35
@Sting you shouldn't need to do that with the v-model
Level 35
Have you cast the client_id to an integer?
Level 35
The only other thing I can think of trying right now is changing the v-if to v-show
Level 104
Where does the clients array come from; are they loading asynchronously? This is what I meant by timing issue - maybe the clients is not available whenever the component is mounted?
Level 1
Fixed with:
$('#client-list').selectpicker('val', _this.client_id);
in the getClientLists function
Level 104
@Sting it might have been useful to know that you were using a third party library from the outset of this thread 🤦♂️
Please or to participate in this conversation.