vue动态绑定input,动态添加input

最新推荐文章于 2025-05-07 19:33:05 发布

小城听风雨

最新推荐文章于 2025-05-07 19:33:05 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue的使用心得 Element-ui

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/a5252145/article/details/103618060

vue的使用心得同时被 2 个专栏收录

36 篇文章

订阅专栏

Element-ui

9 篇文章

订阅专栏

本文介绍如何使用Vue结合Element-UI实现动态添加和编辑输入框，通过数组遍历生成指定数量的input元素，并确保其可编辑性。适用于需要根据外部数据动态生成表单字段的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue动态绑定input,动态添加input

技术：vue+elemen-ui
原理：数组遍历出input，每点一下push一次。
需求：有时候需要根据其他页面传进来的数组，渲染list.length个input，还必须保证可以输入修改。

在这里插入图片描述

<template>
  <!-- test 测试使用 -->
  <div class="test">
    <div v-for="(module,index) in modules" :key="index">
      <el-input v-model="module.text"></el-input>
    </div>
    <el-button type="primary" @click="add">新增</el-button>
  </div>
</template>

<script>
let that;
export default {
  name: "test",
  filters: {},
  computed: {},
  data() {
    return {
      list:["填空1","填空2","填空3"],  // 模拟传过来的数组
      modules:[{
        text:'test'
      }]
    };
  },
  methods: {
    add() {
      this.modules.push({text:'test'});  // 每点一下，push一次
    }
  },
  beforeCreate: function() {
    that = this;
  },
  mounted() {
    // 页面加载时把数据遍历后 - push到modules数组里面
    for(var item of this.list) {
      this.modules.push({text:item});
    }
  }
};
</script>

<style scoped>
.test {
  width: 100%;
  height: 100%;
  position: relative;
}
.test .el-input {
  width: 200px;
  margin: 10px 0;
}
</style>