[JavaScript知识库] VUE实现添加多个动态输入框并获取值

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VUE实现添加多个动态输入框并获取值 -> 正文阅读

[JavaScript知识库]VUE实现添加多个动态输入框并获取值

VUE实现添加多个动态输入框并获取值

实现思想: 运用数组创建多个数组对象变量, 然后存储在对应的数组里, 在需要提交的时候从数组中用下标取把属于同一列的数据取出来

HTML

      <div class="add-box">
        <p>岗位要求：</p>
        <p>评论：</p>
        <p>权重：</p>
      </div>
      <div v-for="(i, j) in list" :key="j" class="add-box">
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="postRequire[j]"
              placeholder="请输入岗位要求"
            />
          </p>
        </div>
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="comment[j]"
              placeholder="请输入评论"
            />
          </p>
        </div>
        <div class="f jc-b">
          <p>
            <el-input
              type="text"
              v-model="weight[j]"
              placeholder="请输入权重"
            />
          </p>
        </div>
      </div>
      <el-button @click="AddPeople">添加岗位职责</el-button>
      <el-button type="primary" @click.stop="submitForm('from')"
          >提交</el-button
        >

CSS 完成样式的修改

.add-box {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  // .jc-b{
  //   padding: 5px;
  //   border: 1px solid gray;
  // }
}

JS 代码片

export default {
  data() {
    return {
      list: [""],
      postRequire: [], //岗位要求
      comment: [], //评论
      weight: [], //权重
  },
  methods: {
    AddPeople() {//添加按钮
      this.list.push({});
      console.log(this.list, "添加的多个数组");
    },
    submitForm(formName) {//提交按钮
      if (formName) {
        let majorAList = [];
        for (let index = 0; index < this.list.length; index++) {
          majorAList.push({
            postRequire: this.postRequire[index],
            comment: this.comment[index],
            weight: this.weight[index],
          });
          console.log('每一列的值',majorAList)
        }
    }
  }