I am very new to Vue and stuck on a problem. I have several drop-down select menus which return info from an Axios request The select t only works when I hit the submit button though. I would like it to run when the user makes the drop-down selection. I can't work out what I am missing. Can anyone help?
I have included some of the code below. Thanks
The html:
<div class="form-group col-md-6">
<label for="subject" class="control-label">Subject</label>
<select
v-model="subject"
class="form-control"
:disabled="selectDisabledSubject"
>
<option disabled value="">Select subject</option>
<option
v-for="subject in uniqueSubjects"
:key="subject"
:value="subject"
>
{{ subject }}
</option>
</select>
</div>
The vue
uniqueSubjects() {
const metaVFees = this.results
.filter((result) => result.metaData && result.metaData.V)
.map((item) => item.metaData.V)
.filter((subject, i, arr) => arr.indexOf(subject) === i);
// Split multiple subjects in strings and store in an array
let subjects = [];
metaVFees.forEach((item) => {
const splitArr = item.split(", ");
subjects = subjects.concat(splitArr);
});
return subjects
.sort()
.filter((subjects, i, arr) => arr.indexOf(subjects) === i);
},
You can use vue Watchers
watch:{
subject(newVal){
// call the function you normally call with submit click
}
}
Related
For some reason that is too long to explain I am trying to modify the behaviour of a select multiple, what I want to achieve is to allow the user to select multiple elements without the need to hold the ctrl/cmd key. this is the html:
<select multiple="multiple" class="form-control">
<option ng-repeat="option in options" ng-click="selectItem(option)" ng-selected="option.selected" value="{{option.id}}">{{option.name}}</option>
</select>
and this is my selectItem function:
$scope.selectItem = (option) => {
let index = $scope.selectedElements.indexOf(option.id);
(index === -1) ? $scope.selectedElements.push(option.id) : $scope.selectedElements.splice(index, 1);
$scope.options.forEach((element, index) => {
element.selected = $scope.selectedElements.indexOf(element.id) !== -1 ? true : false;
});
}
this is partially working: the $scope.selectedElements array is updated and also the $scope.options has the selected property correctly set to true or false. However the select only shows as highlighted the last element I clicked on.
Am I missing something?
I want to filter a list of movies based on their categories by selecting them using a select menu (select tag), I could do it with a button using on click event it works, but when I want to replace it buy multi-select by changing the event to onChange the filter didn't work.
what do you think?
Thank you
//filter movies based on their categories, this function is created in App.js, it has been passed as props to my CategoriesFilter components
const filterMovie = (category) => {
const filterMovie = MoviesData.filter((movie)=> movie.category === category);
setMoviesList(filterMovie);
}
// this my components
const CategoriesFilter = ({categories, filterMovie}) => {
return (
<div>
<select >
{categories.map((category, index)=> {
return (
<option key={index} onChange={()=> filterMovie(category)}>{category}</option>
)
})}
</select>
</div>
)
}
There are a few options.
You can probably build a custom multi select dropdown component with checkboxes for each item.
You can use third party npm packages like react-select. https://www.npmjs.com/package/react-select
I would suggest you to use the react-select.
You can also use select tag with multiple attribute. But it won't work the way you want it to.
<select name="cars" id="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
To select multiple items, you'll have ctrl + click the items
Multiple select is <select multiple/>
onchange event is not associated with each option, it is an event of select element.
I have a select filter menu which holds 5 different options.This event works fine when the page loads and also on refresh.When i try to select option continuously it is not filtering the content based on the option
part of the code is:
<div className="filter_role">Role{" "}<select
defaultValue={this.state.role}
onChange={this.filterRole.bind(this)}
>
<option value="">All</option>
<option value="Batsman">Batsman</option>
<option value="Wk-Batsman">WK-Batsman</option>
<option value="Bowler">Bowler</option>
<option value="All-Rounder">All-Rounder</option>
</select>
</div>
filterRole = (event) => {
if(event.target.value === "") {
this.setState({role:event.target.value, players: this.state.players})
} else {
this.setState({
role: event.target.value,
players: this.state.players.filter(player => player.role.indexOf(event.target.value)>=0)
})
}
console.log(event.target.value)
}
What am i doing wrong here? can anyone please help me out.
I think you are filtering it the wrong way, it should be like:
this.state.players.filter(player => player.role.indexOf(event.target.value) < 0)
I have a Select Option Like This .. In this dropdown i am calling an api just to get some data
<div class="mb-frm_l frm_r">
<div class="dropdown inputs">
<select
[ngClass]="{
error:
billingForm.controls.selectDistrict.errors?.required &&
((billingForm.controls['selectDistrict'].dirty &&
billingForm.controls['selectDistrict'].touched) ||
billingForm.controls['selectDistrict'].errors
.isValidString)
}"
formControlName="selectDistrict"
id="selectDistrict"
(focus)="onFocus()"
(blur)="onBlur()"
(change)="getCityList($event.target.value)" // here i want to pass the District name
>
<option value="">Select District</option>
<option
*ngFor="let district of districtList"
[attr.district-id]="district.district_id"
[value]="district.district_id"
>
{{ district.district }}
</option>
</select>
<div
*ngIf="
billingForm.controls['selectDistrict'].invalid &&
billingForm.controls['selectDistrict'].dirty &&
billingForm.controls['selectDistrict'].touched
"
class="error_txt"
>
Please select state
</div>
</div>
</div>
Here I am passing the selected value in getCityList($event.target.value)
As i want the district.district also in my ts file
My Question is How can i pass the district.district here with the value also ???
Thanks!
A simple find in getCityList is what you need. Since you didnt provide the code, I made up something:
getCityList($event.target.value): void {
const value = '';
const district = this.districtList.find((d) => d.district_id === $event.target.value);
if (district) {
value = district.district;
}
}
Change your Option tag this [value]="district.district_id" into
[value]="district"
Then your (change)="getCityList($event.target.value)" will return selected district object. then you can access any property you want
I have a Vue where the AJAX fetched select options are not available the FIRST time the Vue is rendered.
I have done as suggested here: https://v2.vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats.
The form is dynamically generated from a "schema" object.
<b-form-group v-for="(obj, key) in schema"
v-if="obj.type !== 'hidden'"
:label="createInputLabel(obj, key)" :label-for="key" >
...
<div v-else-if="obj.type == 'select'" role="group"
class="form-group">
<select v-model="attributes[key]" :id="key" :name="key"
class="custom-select">
<option v-for="option in optionsList[key]"
v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
...
</b-form-group>
optionsList is a keyed object containing lists of all the select elements on the form. optionsList is created by watching the "schema" object. The Rest API code is:
var idx = key;
Rest('GET', '/table/' + schema[key].table, requestParams,
this.$root.user.token)
.then(response => {
var localOptionsList = [];
response.data.forEach(function(row) {
var obj = { value: row[schema[idx].listColumns],
text: row[schema[idx].listColumns] };
localOptionsList.push(obj);
});
Vue.set(me.optionsList, idx, localOptionsList);
})
.catch(error =>
...
As mentioned, the code works fine, apart from the FIRST time the Vue is rendered.
This is obviously because the data has not yet been returned from the Rest API, so my problem is how to get the Vue to react when the data arrives?
Can anyone help?