How to create input name field with string-variable schema in Vue Js?

Question

I use VueJs, i need to extract javascript variable to generate hidden fields.

But i need to set the name by the index of the variable.

I want to use zig-zag naming schema.

like,

 <input type="text" name="segment[{index}][field_name]" :value="{value}">

Javascript Variable:

    var test_template = {
                        0: {
                            nb: 2
                        },
                        1: {
                            nb: 1
                        },
                        2: {
                            nb: 4
                        }
                    };

Foreach with Variable to Generate Hidden Fields :

    <div v-for="(a,index) in test_template" class="row">            
      <input type="hidden" :name="segment[index][nb]" :value="a.nb">
   </div>

Here, :name is a dynamic instance for access vuejs values. index is vuejs variable but "segment" is not a vuejs variable, its actually a string.

But i need this schema to generate array of inputs.

Is this possible ?

Or Any other solutions are there ?

Thanks in Advance !

Have you tried segment + a.nb ?

vbranden
– vbranden

2016-12-10 00:01:52 +00:00
Commented Dec 10, 2016 at 0:01 — vbranden
– vbranden, Commented Dec 10, 2016 at 0:01

tony19 · Accepted Answer · 2022-07-14 23:55:43Z

47

To create input elements with dynamic names by index, you can use the + in a JS expression to concatenate:

<div v-for="(a,index) in test_template" class="row">            
  <input type="hidden" :name="'segment[' + index + '][nb]'" :value="a.nb">
</div>

Generates:

<input type="hidden" name="section[0][nb]" value="2">
<input type="hidden" name="section[1][nb]" value="1">
<input type="hidden" name="section[2][nb]" value="4">

See: https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

edited Jul 14, 2022 at 23:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 10, 2016 at 6:31

Jenna Pederson

6,0211 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gjaa Over a year ago

You can also use JS6 interpolation. :name="`segment[${index}][nb]`"

sipman · Accepted Answer · 2016-12-09 23:04:30Z

15

I ran across the same problem as you, and here is how i fixed it !

make a method like this in your vue-instance

getInputName(index, dataName){
      return "items["+index+"]["+dataName+"]";
    }

then you can use it like this:

<input v-bind:name="getInputName(index, 'name')" type="text" v-model="item.name">
<input v-bind:name="getInputName(index, 'price')" type="text" v-model="item.price">

which will give you this post result:

"items" =>[
    0 =>[
      "name" => "test"
      "price" => "23"
    ],
    1 =>[
      "name" => "jakke"
      "price" => "99,2312"
    ]
]

And thats it...

Cheers, Sipman

answered Dec 9, 2016 at 23:04

sipman

1512 bronze badges

Collectives™ on Stack Overflow

How to create input name field with string-variable schema in Vue Js?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related