vue.js动态添加el-form表单的el-input并且动态绑定v-model

weixin_52955990

已于 2024-04-12 14:53:26 修改

阅读量667

点赞数 2

文章标签： vue.js 前端 javascript html

于 2024-04-12 12:52:40 首次发布

本文链接：https://blog.csdn.net/weixin_52955990/article/details/137676454

版权

本文详细展示了如何在Vue应用中使用<template>和v-model实现表单元素的数据绑定，以及如何在getFormData方法中获取和打印数据。

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

template片段

<template>
  <div>
    <el-form>
      <tamplate v-for="(item, index) in form">
        <el-form-item :label="item.label">
          <el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
        </el-form-item>
        </tamplate>
      <el-button type="primary" @click="getFormData()">打印</el-button>
    </el-form>
  </div>
</template>

js片段

export default {
  data() {
    return {
      formData: [], // 或者 formData:{}
      form: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ],
    }
  },
  
  mounted() {
    // this.getFormData()
  },

  methods: {

    getFormData() {
      console.log(this.formData);
      console.log(this.formData.name);
      console.log(this.formData.age);
    }
  }
}