vue 动态添加input输入框

vue 动态添加input输入框

实现需求：请求到后台数据是String以"，"隔开的，要求要以input框的方式来增删改，最后以String的数据格式提交给后台

data() {
    return {
      str: "aaaa,bbbbb,ccccc",
      mylist: []
    };
  },

  mounted() {
    this.mylist = this.str.split(",").map(function(item) {
      return {
        val: item
      };
    });
  },

因为input的v-model不能为item，所以给他的值加上一个属性名
.map():对数组的每个元素都遍历一次，同时返回一个新的值

add() {
      this.mylist.push({ val: "" });
    },
 remove(myindex) {
      this.mylist = this.mylist.filter(
        (currentValue, index) => index != myindex
      );
    }

添加和删除数组
filter() - 用于把Array的某些元素过滤掉，然后返回剩下的元素。filter()接收一个函数把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素.
语法：array.filter(function(currentValue,index,arr), thisValue)

参数解释：

currentValue：必须。当前元素的值

index：可选。当前元素的索引值

arr：可选。当前元素属于的数组对象

filter()的本质就是筛选，留下符合条件的，过滤掉不符合条件的，判断条件是点击的index不等于数组里面的index，若等于就过滤掉这个项

save() {
      var result = this.mylist.map(item => item.val);
      result = result
        .filter(function(item) {
          return item;
        })
        .join(",");
    },

这里的filter()的目的是剔除为空的数组，然后再转字符串