Level 2
I don't really get what you're trying to do... Is it something like that ? (Wrong fiddle link T_T)
Dec 19, 2015
8
Level 18
Dynamic Input Array
Hello all,
Hope you're all having a good weekend!
I'm currently have small form that has a couple of buttons to add and remove a new fields.
Here's what I'm currently working with: https://jsfiddle.net/joedawson/dmf2crzL/
As you can see, I already have the basic functionality down - but when I add a new row, I want to create an array of fields - how could I achieve this?
I have tried something like this:
<!-- Field Template -->
<div class="input-group" v-el:row>
<input type="text" class="form-control" v-model="template.fields[].label">
<span class="input-group-addon">
<label>
<input type="checkbox" v-model="template.fields[].sensitive"> Sensitive
</label>
</span>
</div>
Notice the template.fields[]? Vue doesn't appear to like this as it requires a key for some reason?
When I loop through each field with v-for, I'm aware that I can maybe use the $index variable - but I can't do this because I have an input outside of my v-for- therefore $index is not available.
So currently, I get a "template" that looks like this:
As you can see, I'm not getting an array of fields - but that's understandable with what I currently have. But really, I want to achieve an output looking a little something like this.
{
"name": "Name of Template",
"fields": [
{
"label": "My Custom Field Name",
"sensitive": true
},
{
"label": "Last Field Name",
"sensitive": false
}
]
}
I hope that makes sense!
Level 18
@Hebilicious unfortunately not - I don't think I could be any clearer here :D
As you can see, I'm not getting an array of fields - but that's understandable with what I currently have. But really, I want to achieve an output looking a little something like this.
{
"name": "Name of Template",
"fields": [
{
"label": "My Custom Field Name",
"sensitive": true
},
{
"label": "Last Field Name",
"sensitive": false
}
]
}
Each time I add a new row, I want to add an object into that fields array...
Level 2
I think I get it : When you press add you want to add another field with the given name, and when you press submit you want to have inside an object :
{
"name": "Name of Template",
"fields": [
{
"label": "My Custom Field Name",
"sensitive": true
},
{
"label": "Last Field Name",
"sensitive": false
}
]
}
give me one sec
Level 2
Level 18
@Hebilicious thanks for your help, but that's unfortunately not what I'm after :(
I think what I currently have, is almost there - when I add a new field with the "Add" button - I just need to add that field to a fields array to get the output I want above. But currently, I only have a single fields object.
Level 2
@JoeDawson Unless I'm missing something that's what you're saying ? http://puu.sh/m1xm6/bb825916d6.png
Level 18
@Hebilicious ah - your previous link before my reply was /6/ not /8/ of that fiddle - I guess you updated it? :D
Thanks - that seems to be working!
Level 2
Yeah I suck at pasting fiddle x)
Please or to participate in this conversation.