I'm currently using a Vue multiselect by loading it with options from an axios return object into taskLocations:
<multiselect
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
This works perfectly but I'm now loading the page with another response that I've assigned to editDetails[] in my data return, and while that works in order to dump data for confirmation, I can't figure out how to keep the multiselect list of options from taskLocations while also preopopulaitng the value for the multiselect with editDetail.location
<multiselect
v-for="editDetail in editDetails"
v-model="taskLocations"
:options="locationOptions"
:multiple="true"
placeholder="Please choose at least one location"
label="name"
track-by="id">
</multiselect>
How can I do this?
Related
I have a problem
I have a api that I took countries
text(string) and value(number) information is coming in this api
and I have a number value
I want it to find the number value I have and the value (number) I pulled from the api.
how can I do that
currently the ones coming from the api are listed
<Multiselect
ref="multiselectRef"
:disabled="disabled"
v-model="value"
:options="options"
:mode="mode"
:valueProp="valueProp"
:label="labelProp"
:trackBy="trackBy"
:name="name"
:searchable="searchable"
:loading="loading"
:tabindex="tabindex"
:noOptionsText="noOptionsText"
#select="$emit('select', $event)"
#change="change"
:placeholder="placeholder"
class="multiselect__item"
/>
my component
<KbsMultiSelect
track-by="text"
name="country_id"
:options="country"
labelProp="text"
label="Ülke"
placeholder="Ülke Seçiniz"
valueProp="value"
/>
I have a Vuejs application within that I am using the Bootstrap-vue. Some fields will be created dynamically based on the user preference.
For example, I have a Skills field to which users can click on the Add button which will show 2 drop-downs. These fields will be added dynamically to the application. I want to ensure that the all the dynamically created dropdowns have the default options selected.
If it's a direct field then I can set the null value and make it a default but for the dynamic cases I am not getting how to do it.
Following is the code I have:
<button class="btn-btn-info" #click="addSkill($event)"> Add Skill </button>
<span v-for="skill in $store.state.skillsList" :key="skill.ID" class="form-inline">
<span class="horizontalSpace">
<b-form-select v-model="skillArray.skillType[skill.ID]" class="form-control" #change="addSkillInformation(skill.ID);">
<b-form-select-option value="null" disabled>Choose</b-form-select-option>
<b-form-select-option value="set">Set</b-form-select-option>
<b-form-select-option value="unset">Unset</b-form-select-option>
</b-form-select>
</span>
</span>
All I want to know is how can I make the Set option selected for all the dropdowns which will be created dynamically based on the Add Skill option.
I tried selected but it does not seem to work for me.
I have recreated your code at jsfiddle. Check it. It working as wanted.
So Ill explain the code .
You need to auto select a default value mean that relevant data property (attached to v-model)should have a value where that value should also available in the option list. So what I have done here is that v-model for b-form-select will be predefined with null values. If you dont know how many dynamic selections will be there then make that data property dynamically on at the component. Means you can initiate data at mounted/created.
Code
<div id="app">
<div class="w-100">
<b-form-select v-for="(skill,index) in skillsList" v-model="selectedSkills[index]" class="form-control" >
<b-form-select-option value="null" disabled>Choose</b-form-select-option>
<b-form-select-option value="set">Set</b-form-select-option>
<b-form-select-option value="unset">Unset</b-form-select-option>
</b-form-select>
</div>
</div>
Script
data() {
return {
selectedSkills : ['null','null','null'],
skillsList : ['skill 01', 'skill 02', 'skill 03'],
}
},
i am using vuetify and his component combobox for search action on website.
when i am typing something in combobox text value add in watcher only when event mouse exit, it does not good for me, because if user typed smthing in this field then clicked on button search nothing happening, only on second click search will work
<v-combobox
dense
v-model="watcher"
items="ItemsArray"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>
add ":" for the before items. such as,
<v-combobox
dense
v-model="watcher"
:items="ItemsArray"
:search-input.sync="search"
item-text="ItemsArray.item_name"
label="item name"
/>
<v-btn #click="Search">Search</v-btn>
I have a select field with a dropdown of predefined values. One of the dropdown values is Other and when the user selects Other, I want to swap this select field with a text field. Now the tricky part, because I want to keep the logic of the select field's v-model (posting data via ajax), the text field is using the same v-model.
Conditional statements work just fine, the issue is that the input text gets prefilled with Other (which should be editable) and when I delete this prefilled value, the select field pops back in.
Here's the relevant code:
<b-select
v-if="experience.position != 'Other'"
v-model="experience.position"
v-validate="'required'"
expanded
:name="'position' + index"
placeholder="Select a position">
<option
v-for="item in workPositions"
v-bind:key="item.id"
:value="item">
{{ item }}
</option>
</b-select>
<b-input
v-if="experience.position == 'Other'"
v-model="experience.position"
v-validate="'required'"
:name="'otherPosition' + index"
placeholder="Position">
</b-input>
You cannot have the same model for both select and input and not have it unaltered when the user selects 'other'.
What I mean by that : you could have the other job appended at the end of experience.position (other:theotherjob), and do some complex tricks with watch and computed. But that would be unnecessarily complex.
I think you should have another variable and merge it with your original form on submit.
I have created below search bar component which interacts with API every time a key is pressed.
<div class="fill-remaining-space">
<md-input-container class="example-full-width" color="accent">
<md-icon mdPrefix>search</md-icon>
<input type="text" mdInput #input (keyup)="search(input)">
<md-icon mdSuffix *ngIf="input.value.length > 0" (click)="input.value=''">clear</md-icon>
</md-input-container>
</div>
Now I am getting results array in my component.ts file. I want to show a dropdown below this search bar when results are fetched from db.
I tried doing multiple things like applying *ngIf on list. but all in vain.
Is there any simple solution which can allow me to show a dropdown list after I start typings characters in search box input?
Thanks in advance.