Vuejs - отображать / получать исходный код `index / id` для ввода в элемент` index / id` для обновления

Question

Каждый набор строк fn[] и ln[] <input> должен независимо обновлять свой собственный элемент <p>.Это ссылка jsfiddle , показывающая проблему, поскольку они не отображаются независимо.

Answer 1

Поскольку fname и lname являются массивами, вы должны обращаться к ним по индексам и обновлять их, и каждый обработчик событий @input должен иметь два параметра, первый - значение, а второй - индекс в массиве:

  <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