Question

我有这样的输入部分：

<div class="cloneable" data-id="0">                 
    <div class="col-md-9">
        <div class="form-group">
            <label>Skills and Qualifications Titles</label>
            <input placeholder="ex : PHP, WordPress" name="skill.name" type="text" class="form-control" vmodel="skill.name">
            <span class="help-block text-danger" v-text="errors.get('skill.name')"></span>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Skill Level %</label>
            <input placeholder="ex : 90" name="skill.percentage" type="text" class="form-control" v-model="skill.percentage">
            <span class="help-block text-danger" v-text="errors.get('skill.percentage')"></span>
        </div>
    </div>
</div>

可以克隆每个部分以制作副本，因此我尝试对数据进行排列，以便我可以像

那样访问它的后端

skill[0]['name']
skill[1]['name']
skill[2]['name']
... etc

我正在启动数据：

skill: [
{
    'name': '',
    'percentage': ''
}
],

我尝试使用像skill.index.name这样的模型，但这不起作用，我怎样才能实现我上面尝试做的事情？

Answer 1

如果我理解，你有一系列的技能，如：

skill: [
{'name': 'a_name', 'percentage': '20'}
{'name': 'b_name', 'percentage': '30'}
],

并且您想要在模板中访问该数组的特定成员。数组在模板中结束的正常方式是使用v-for:，如：

<li v-for="a_skill in skill">
    {{ a_skill.name }}
</li>

...想要阵列中的所有技能。

如果要访问该阵列的特定成员，则需要添加如下索引：

<input v-model="skill[0].name"> // not skill.0.name

（不要忘记你的例子中遗漏的v-model中的连字符）

如果您想要将某些数据用作索引，甚至可以这样做。例如：

  data () {
    return {
      skill: [
        {"name": "Foo"},
        {"name": "Bar"}
      ],
      i: 1
    }},

然后你可以在模板中使用它：

<input v-model="skill[i].name">

Vue js用于可克隆部分的输入数组

1 个答案: