Question

每组fn[]和ln[] <input>行必须独立更新其自己的<p>元素。这是jsfiddle链接，用于显示问题，因为它们不是独立映射的。

Answer 1

由于fname和lname是数组，因此您应该通过索引访问它们并更新它们，并且每个@input事件处理程序都应具有两个参数，第一个是value，第二个是是数组中的索引：

  <input @input='setFName($event,0)' type='text' name='fn[]' id='fn1' />
    ...
  <input @input='setLName($event,0)' type='text' name='ln[]' ... />

，方法应该类似于：

    methods: {
    setFName(event,index){
        // console.log(event.target.value);
        this.$set(this.fname,index,  event.target.value);
    },
    setLName(event,index){
        // console.log(event.target.value);
        this.$set(this.lname,index,  event.target.value);
    },
    getFullName(i){
  let fullname='';
        if (this.fname[i]!=undefined )
         fullname=this.fname[i];
   if(this.lname[i]!=undefined)
    fullname+=" "+this.lname[i];
    return fullname;

    }
}

有关更多详细信息，请检查此fiddle

Vuejs-将输入的源`index / id`映射/获取到元素`index / id`进行更新

1 个答案: