如何在 Vue Js 中使用字符串变量模式创建输入名称字段? [英] How to create input name field with string-variable schema in Vue Js?
问题描述
我使用 VueJs,我需要提取 javascript 变量来生成隐藏字段.
但是我需要通过变量的索引来设置名称.
我想使用锯齿形命名模式.
喜欢
Javascript 变量:
var test_template = {0:{注意:2},1:{注意:1},2:{注意:4}};
Foreach 与变量生成隐藏字段:
<input type="hidden" :name="segment[index][nb]" :value="a.nb">
这里,:name 是一个用于访问 vuejs 值的动态实例.index 是 vuejs 变量,但 "segment" 不是 vuejs 变量,它实际上是一个字符串.
但我需要这个模式来生成输入数组.
这可能吗?
或者有其他解决方案吗?
提前致谢!
要通过索引创建具有动态名称的输入元素,可以在 JS 表达式中使用 +
进行连接:
<input type="hidden" :name="'segment[' + index + '][nb]'" :value="a.nb">
生成:
<input type="hidden" name="section[1][nb]" value="1"><input type="hidden" name="section[2][nb]" value="4">
参见:https://vuejs.org/v2/guide/语法.html#Using-JavaScript-Expressions
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 !
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://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
这篇关于如何在 Vue Js 中使用字符串变量模式创建输入名称字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!