如何在vue js动态变量中进行拖曳方式绑定，并在按提交后获取值

Question

我让Vuejs App从本地文件中读取数据，然后根据这些数据创建表单，所以我的问题是当我按下提交表单时，数据不会在控制台上打印，我不知道为什么，但我想问题与字段名称有关，因为它是动态绑定的。例子.亚姆Metadata:  Form:    fields:        -             type: email            lable: Email            name: email            placeholder: Enter Your Email        -                type: text            name: username            lable: Username            placeholder: Enter Your Username        -            type: number                name: age            lable: Ege            placeholder: Enter Your Age    dropdowns:        -            name: gender            lable: Gender            placeholder: Select a City            options:                 - name: Male                - name: Female                - name: Other页面.vue<template>  <div class="about">    <div class="container">      <Panel header="Dynamic Form" style="margin-top:100px">          <form @submit.prevent="save()">              <span class="p-float-label" style="margin-bottom:5px" v-show="metadata.fields.length" v-for="(field, i) in metadata.fields" :key="i">                <InputText id="username"                   style="width:70%"                  :type="field.type"                  :name="field.name"                   :v-model="field.name"                   :placeholder="field.placeholder"/>                <label v-html="field.lable"></label>              </span>        </form>      </Panel>    </div>      </div></template>所以当应用程序运行这个而不是实际值我得到console.log("Data was saved", this.$data, this.gender);genderundefiend有人可以帮我吗？

Answer 1

Vue.component('v-select', VueSelect.VueSelect)

new Vue({

  el: '#app',

  data() {

    return {

      formdata: {},

      metadata: {

        fields: [

          {

            type: 'email',

            lable: 'Email',

            name: 'email',

            placeholder: 'Enter Your Email',

          },

          {

            type: 'text',

            name: 'username',

            lable: 'Username',

            placeholder: 'Enter Your Username',

          },

          {

            type: 'number',

            name: 'age',

            lable: 'Ege',

            placeholder: 'Enter Your Age',

          }

        ],

        dropdowns: [

          {

            name: 'gender',

            lable: 'Gender',

            placeholder: 'Select Gender',

            options: [

              { name: 'Male' },

              { name: 'Female' },

              { name: 'Other' },

            ]

          }

        ]

      }

    }

  },

  created() {

    // your yaml import

    Object.keys(this.metadata).map((element)=>{

      let fields = this.metadata[element];

      fields.forEach(field => {

        this.$set(this.formdata, field.name, '')

      });

    });

  },

  methods: {

    save() {

      console.log(this.formdata);

    },

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://unpkg.com/vue-select@latest"></script>

<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">

  <form @submit.prevent="save()">

    <div 

      v-show="metadata.fields.length" 

      v-for="(field, i) in metadata.fields" 

      :key="'f' + i">

      <input

        :type="field.type"

        :name="field.name" 

        v-model="formdata[field.name]" 

        :placeholder="field.placeholder"/>

      <span>{{field.name}}</span>

    </div>

    <div 

      v-show="metadata.dropdowns.length"

      v-for="(dropdown, j) in metadata.dropdowns" 

      :key="'d' + j">

      <div>{{dropdown.name}}</div>

      <div>

        <v-select 

          style="width: 200px;"

          v-model="formdata[dropdown.name]" 

          :options="dropdown.options.map(o => o.name)"

          :placeholder="dropdown.placeholder" />

      </div>

    </div>

    <button 

      type="submit"

    >

      submit

    </button>

  </form>

</div>

这是你想要实现的目标吗？我没有你的按钮，下拉列表和输入文本组件，所以我使用html输入，按钮和v选择组件来替换下拉列表

您的代码中存在一些问题。

1. v 模型不是：v 模型

2. 要使用 vue 数据变量，请使用 {{ variable_name }}，而不是 v-html

3. 我不确定编写 Object.defineProperty（） 是否正确，但我以前从未在 vue 中使用它。但是，您可以使用 this.$set/Vue.$set向数据添加新属性。https://v2.vuejs.org/v2/api/#Vue-set

4. 要将v-model分配给动态变量（动态 field.name 在你的情况下），我会做的是声明一个空对象，并将动态属性分配给对象。在这种情况下，v 模型=“表单数据[field.name]”而不是 v 模型=“field.name”。