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

原创已于 2024-04-12 14:53:26 修改 · 804 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #html

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

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

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);
    }
  }
}