如何在Vue Js中使用字符串变量模式创建输入名称字段？

Question

我使用VueJs,我需要提取javascript变量来生成隐藏字段.

但我需要通过变量的索引设置名称.

我想使用zig-zag命名模式.

喜欢,

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

Javascript变量:

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

Foreach with Variable生成隐藏字段:

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

这里,:name是访问vuejs值的动态实例. index是vuejs变量,但" segment "不是vuejs变量,它实际上是一个字符串.

但是我需要这个模式来生成输入数组.

这可能吗 ？

或者有其他解决方案吗？

提前致谢 !

Answer 1

要通过索引创建具有动态名称的输入元素,可以使用+JS表达式连接:

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

产生:

<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">

请参阅:https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

Answer 2

我遇到了和你一样的问题,这就是我修复它的方法!

在你的vue-instance中创建一个这样的方法

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

然后你可以像这样使用它:

<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">

这将给你这个帖子的结果:

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

那就是它......

干杯,西普曼