I am developing an application and I am using Vue 2 as the javascript framework,
inside a v-for loop I need the counter of the loop to be bound to the v-model name of the elements, this my code:
<div v-for="n in total" class="form-group">
<input type="hidden" id="input_id" :name="'input_name_id[' + n + ']'" v-model="form.parent_id_n" />
</div>
I need n to be the counter of the loop, for example for the first element it should be:
<div class="form-group">
<input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>
the name attribute binding works but I have no idea how to get the v-model working as well?
To use v-model with form.parent_id[n]:
form should be a data property.
form.parent_id should be an array.
Then you can do the following:
<div id="demo">
<div v-for='n in 3'>
<input v-model="form.parent_id[n]">
</div>
<div v-for='n in 3'>
{{ form.parent_id[n] }}
</div>
</div>
by having a vue instance setup like:
var demo = new Vue({
el: '#demo',
data: {
form: {
parent_id: []
}
}
})
Check this fiddle for a working example.
Another way achieve this is using bracket notation of accessing object property.
<div v-for="n in total" class="form-group">
<input type="hidden"
id="input_id"
:name="'input_name_id[' + n + ']'"
v-model="form['parent_id_' + n ]" />
</div>
Repeated text filed 10 times and separated v-model for each
<v-text-field
v-for="(n,index) in 10"
:key="index"
v-model="pricing.name[n]"
color="info"
outline
validate-on-blur
/>
storing data
data() {
return {
pricing:{
name: [],
}
}
When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pick up these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).
this code worked for me:
HTML
<input type="number" #input="updateValue($event, i, 'pci')" :value="form.neighbours[i].pci" />
JS
updateValue(event, i, key) {
const neighbour = {...this.form.neighbours[i]};
neighbour[key] = event.target.value;
this.form.neighbours.splice(i, 1, neighbour)
}
Assuming input_name_id is a string, What you need to do is :name="'input_name_id' + n"
Here is a working solution
Related
StackBlitz: http://stackblitz.com/edit/angular-jul7bv
I am having trouble with Angular FromControl, that are being created dynamicly based od passed data.
My list displays Groups and Subgroups of specific Data, everything works almost perfectly fine, but whenever I check subgroup, every of its sibling is being marked and i am unable to come up whats wrong.
Thats my html:
<div *ngFor="let chapter of checkboxControlLabels; let i = index;">
<div class="input-checkbox-subgroup-list__checkbox">
<div class="input-checkbox">
<input type="checkbox" [attr.id]="chapter.id + '_checkboxControl_' + i"
[formControl]="getChapterControl(i)" />
<label [attr.for]="chapter.id + '_checkboxControl_'+ i">{{ chapter.title }} </label>
</div>
</div>
<div class="input-checkbox-subgroup-list__checkbox" *ngFor="let chart of chapter.charts; let x = index;">
<div class="input-checkbox chart">
<input type="checkbox" [attr.id]="chart.title + '_checkboxControl_' + x" [formControl]="getChartControl(i, x)" />
<label [attr.for]="chart.title + '_checkboxControl_' + x">{{ chart.heading }} </label>
</div>
</div>
</div>
And this is how I am mapping specific FormControl :
getChartControl(chapterIndex: string, chartIndex: number) {
return this.data.controls[chapterIndex].get('charts').controls[chartIndex];
}
As you can see on below image when I check subgroup, there is 11 selected and I have no idea how thats possible.
More intresting thing is that this doesnt apply to groups... So if I would check First group there would be only one selected...
This is FormGroupModel that I am using later on:
this.chapterChartsData.forEach(chapters => {
dataForm.push(new FormGroup({
chapter: new FormControl(false),
charts: new FormArray(Array(chapters.charts.length).fill(new FormControl(false)))
}))
});
Apparently problem was with populating list of form controls like that :
charts: new FormArray(Array(chapters.charts.length).fill(new FormControl(false)))
My data is stored in an array. For each array item, there should be a text input in the form. When the user types into one of the text inputs, the array should be updated with the new values.
<div class="form-group" v-for="synonym in row.synonyms">
<input type="text" class="form-control" v-model="synonym" />
</div>
Here's a fiddle: https://jsfiddle.net/eywraw8t/122210/
The idea is when you type into one of the textboxes, the array value (shown below in that fiddle) should also update, but it doesn't.
Upon inspecting the console, you would find the following error:
You are binding v-model directly to a v-for
iteration alias. This will not be able to modify the v-for source
array because writing to the alias is like modifying a function local
variable. Consider using an array of objects and use v-model on an
object property instead.
Meaning, we need to give v-model access to a direct reference to the synonym and its index:
new Vue({
el: "#app",
data: {
row: {
synonyms: [
"abc",
"def",
"ghj",
]
}
},
methods: {
}
})
body {
font-family: 'Exo 2', sans-serif;
}
#app {
margin: auto;
}
<div id="app">
<h2>Items</h2>
<div class="form-group" v-for="(synonym,i) in row.synonyms">
<input type="text" class="form-control" v-model="row.synonyms[i]" />
</div>
<br>
<h3>
The text below should change if yout type inside the textboxes:
</h3>
<p>
{{ JSON.stringify(row)}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
The correct way to do it is to use an index, which vue.js provides in loops:
<div class="form-group" v-for="(synonym, index) in row.synonyms">
<input type="text" class="form-control" v-model="row.synonyms[index]" />
</div>
https://jsfiddle.net/m14vd89u/1/
This is the recommended way that Vue.js wants you to do it by using an index (synonym, index):
https://v2.vuejs.org/v2/guide/list.html
<div class="form-group" v-for="(synonym, index) in row.synonyms">
<input type="text" class="form-control" v-on:blur="onItemsChanged(synonym)" v-model="row.synonyms[index]" />
</div>
If you wanted to do it another way you could introduce a method v-on:blur:
new Vue({
el: "#app",
data: {
row: {
synonyms: [
"abc",
"def",
"ghj",
]
}
},
methods: {
onItemsChanged (synonym) {
// do something with array
}
}
})
I have created a vuejs2 app using vue-cli. I'm trying to bind dynamic value for checkbox as vuejs documentation said: value binding. But its giving me undefined. If I don't bind vlaue its giving me true or false. This is my ValueBinding.vue component.
<template>
<div id="input">
<p> Selected value for smoking: {{ smoking }} </p>
<input v-model="smoking" v-bind:true-value="Y" v-bind:false-value="N" type="checkbox">
<label>No Smoking</label>
<br>
<button #click="submit">Submit</button>
</div>
</template>
<script>
export default {
name: 'value-binding',
data() {
return {
smoking: ''
}
},
methods: {
submit() {
console.log(this.smoking) //shows undefined
}
}
}
</script>
I'm new to vuejs. Thanks in advance.
When you use v-bind, it dynamically bind one or more attributes to an expression. In your case when you do
v-bind:true-value="Y"
It will try to find a data attribute: Y in vue instance, as you have not defined any such attribute, it will become undefined.
If you just want to true-value as "Y" and false-value as "N", do follwing:
<input v-model="smoking" true-value="Y" false-value="N" type="checkbox">
I want to be able to add/remove items in an order and have them aggregate into an array to be sent to the backend. The data will look like:
CustomerName: Billy
Orders: [Pizza, Burger, Sushi]
Can't find any SO answers or documentation that gets into iterated input binding. Anyone attempted this? Template code:
<div>
<input
type="text"
name="name"
title="name"
placeholder="Customer Name"
[(ngModel)]="customerName"/>
</div>
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[index]"/>
</div>
inside the Add New button's click function:
...firebaseStuff... .push({name: name, order: this.itemsInNewOrder})
unfortunately, this doesn't work. Thanks in advance! :)
Edit 1: There are 2 buttons that trigger (respectively):
incrementItemsInNewOrder() {
this.itemsInNewOrder.push("")
}
decrementItemsInNewOrder() {
this.itemsInNewOrder.pop()
}
I can see one problem. You should use the variable i that you have declared in template.
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[i]"/> <------ HERE
</div>
EDIT
angular seems to be doing change detection when typing into the inputs and renders them again, when that happens you lose the focus.
but if you wrap the values into objects and suddenly it works.
Component:
itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}];
template:
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[i].value"/>
</div>
I have a object which holds the key and value pair.
$scope.groups= {
1050 : 'Test',
1850 : 'Test1'
}
$scope.AnotherArray = [1050,1850];
item from ng-repeat is passed to the object as key to obtain the text 'Test'
<div ng-repeat="item in AnotherArray">
<input type="text" ng-model="groups[item]" />
</div>
Is there a way in angular to do this ?
As you were asking for an "Angular-way" to do this, here is a mildly modified version of Angular's ngRepeat example:
<div ng-repeat="(key, obj) in groups">
[{{key}}] {{obj}}
<input type="text" ng-model="obj"/>
</div>
http://plnkr.co/edit/0IRvLZpbUZUQBXOnebOt?p=preview
It makes use of Angular's internal conversion of array-like objects.
Link to Angular's ngRepeat-documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat