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

Posted 2023-02-23

【中文标题】Vuejs - 将输入的源`index/id`映射/获取到元素`index/id`以进行更新

【英文标题】：Vuejs - map/get source `index/id` of input to an element `index/id` for update

【发布时间】：2019-05-17 01:34:53

【问题描述】：

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

【参考方案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

【讨论】：

Boussadjra Brahim：太棒了！ ：） 不胜感激！早些时候，我确实传递了 id 并且工作了，但是数组中的索引很痛苦！赞成并接受。