How to push object to existing array in Vue.js - javascript

In the below code I have a value and that is an object how to can I push to the exist array.
methods: {
onChange(event) {
this.newItems.push(event.target.value);
console.log(event.target.value);
}
}
and my blade is:
<select #change='onChange($event)' class="form-control">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}</option>
</select>

I would suggest using v-model on the select to detect which is currently selected.
<div id="app">
<select #change="onChange" class="form-control" v-model="selected">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">#{{ item.name }}
</option>
</select>
<p v-for="newItem in newItems">
{{newItem}}
</p>
</div>
and then push this.selected in your onChange method instead:
this.newItems.push(this.selected)
Hope this helps.
Working fiddle of your code with some small modifications:
https://jsfiddle.net/MapletoneMartin/e4oth98p/7/

Related

How to add default option in select for AngularJS?

I don't know why this is not adding a default selected view:
I thought ng-init would make it have a default selected view.
How do I make the drop down box menu have a default selected value?
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname">
{{car.firstname}} {{car.lastname}}
</option>
</select>
You can try to initialize selectedCar in your controller rather ng-init.
Try the below code.
In your controller initialize it.
For e.g:
$scope.selectedCar = $scope.Cars[0];
And in the template:
<select ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="selectedCar.id == car.id">
{{car.firstname}} {{car.lastname}}
</option>
</select>
Or
You can try using ng-options. Reference Another way by using ng-options
You can set the default value for the select element by binding the ng-model with the variable you assigned with ng-init since ng-init doesn't assign the default value for the select and option components, but the default value to a variable in the scope.
Try using selected in option to select the default value.
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" selected>
{{car.firstname}} {{car.lastname}}
</option>
Or you can use ng-selected
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="$first">
{{car.firstname}} {{car.lastname}}
</option>

Onclick button isnt working in vue.js in option tag

Im trying to get the item properties that is being clicked in the option button
This is my code
<select #click="populate" class="form-control" tabindex="12">
<option disabled value="" selected="selected">Select one</option>
<option v-for="(payment, index) in paymentsSelect" #click="pop(payment)"
:key="index"
:value="payment.id">{{ payment.name }}
</option>
</select>
this is my data
selectedPayment: '',
paymentsSelect: [],
these are my methods
pop(payment){
console.log(payment)
},
populate(){
var self = this
this.$http.get(this.$backendUrl + 'subjects/payment_method')
.then(function(response) {
self.paymentsSelect = response.data.data
})
.catch(function() {})
},
No need to add event, just bind the select input to a data property using v-model like :
<select v-model="selectedPayment" class="form-control" tabindex="12">
<option disabled value="" selected="selected">Select one</option>
<option
v-for="(payment, index) in paymentsSelect"
:key="index"
:value="payment">
{{ payment.name }}
</option>
</select>
selectedPayment changes when you select an option then use it in your script like this.selectedPayment

Access value of option in select and pass it to function - Angular 5

I have an angularForm and a combobox which is filled with options from the database. I need to get the selected option and pass it to a function on button click
<div class="form-group">
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>
</div>
<div class="form-group">
<button (click)="addFeature(name.value, description.value,product.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>
When I click the button and console.log product.value I get [object,object], how to fix this?
addFeature(name, description, product) {
console.log(product);
// this.featureservice.addFeature(name, description,product);
// this.router.navigate(['/features/index']);
// location.reload();
}
UPDATE
The values in the combobox are filled by:
ngOnInit() {
this.getProducts();
}
getProducts() {
this.productservice.getProducts().subscribe(res => {
this.products = res;
})
}
You are getting the whole object, if you need name or description , access it as
addFeature(name, description, product) {
console.log(product.name);
}
EDIT
You can use ngModel and access the variable directly
<select class="form-control" [(ngModel)]="selectedProduct" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>
and you can access it as,
addFeature() {
console.log(this.selectedProduct);
}
Bind to ngValue instead value of the option tag:
<div class="form-group">
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
</select>
</div>
See Differences between value and ngValue in Angular 5 for more info.
I don't get your doubt precisely but try to change your select tag to something like so:
<select class="form-control" formControlName="product" #product>
<option *ngFor="let product of products" [value]='product.value'
{{product.name}}
</option>
</select>
I found the solution myself
<select class="form-control" [(ngModel)]='selectedOption' formControlName="product" #product>
<option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
</select>
<button (click)="addFeature(name.value, description.value,selectedOption.name)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>

Vue 2 Dynamic Model with V-for loop pass v-model

I am using a v-for loop to get categories from a vuex store and display in a dropdown form like here:
<label for="sub-category">
<select name="sub-category" required>
<option value="">Choose sub category</option>
<option v-for="(sub, index) in subcategory" :key="index" :value="sub.value">{{ sub.name }}</option>
</select>
<span class="form-error">
<p>You have to choose a sub-category</p>
</span>
</label>
Now everything above works fine, but now I want to save its value to data() and then use that data to make a post request.
I tried
export default {
name: 'formPost',
data() {
return {
selectedSubCat '',
show: false,
};
},
components: {
Headers,
Footers,
},
};
then on the form add a v-model="selectedSubCat", but it's not working.
I also tried:
<select name="sub-category" required>
<option value="">Choose sub category</option>
<option v-model="selectedSubCat[sub.value]" v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
</select>
How can I fix this problem?
I FIXED IT :(
<select name="sub-category" required v-model="selectedSubCat">
<option value="">Choose sub category</option>
<option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
</select>
I was missing it :( - I had to get the value from select...
This is the solution to my problem!
<select name="sub-category" required v-model="selectedSubCat">
<option value="">Choose sub category</option>
<option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
</select>

Dynamic select options in ng-repeat

I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.

Categories