How To Create Input Name Field With String-variable Schema In Vue Js?

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, &

Solution 1:

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">            
  <inputtype="hidden":name="'segment[' + index + '][nb]'":value="a.nb"></div>

Generates:

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

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

Solution 2:

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