如何在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({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; formdata: {},&nbsp; &nbsp; &nbsp; metadata: {&nbsp; &nbsp; &nbsp; &nbsp; fields: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'email',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lable: 'Email',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'email',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder: 'Enter Your Email',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'text',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'username',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lable: 'Username',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder: 'Enter Your Username',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'number',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'age',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lable: 'Ege',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder: 'Enter Your Age',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; dropdowns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'gender',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lable: 'Gender',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder: 'Select Gender',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { name: 'Male' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { name: 'Female' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { name: 'Other' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; created() {&nbsp; &nbsp; // your yaml import&nbsp; &nbsp; Object.keys(this.metadata).map((element)=>{&nbsp; &nbsp; &nbsp; let fields = this.metadata[element];&nbsp; &nbsp; &nbsp; fields.forEach(field => {&nbsp; &nbsp; &nbsp; &nbsp; this.$set(this.formdata, field.name, '')&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; },&nbsp; methods: {&nbsp; &nbsp; save() {&nbsp; &nbsp; &nbsp; console.log(this.formdata);&nbsp; &nbsp; },&nbsp; }});<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">&nbsp; <form @submit.prevent="save()">&nbsp; &nbsp; <div&nbsp;&nbsp; &nbsp; &nbsp; v-show="metadata.fields.length"&nbsp;&nbsp; &nbsp; &nbsp; v-for="(field, i) in metadata.fields"&nbsp;&nbsp; &nbsp; &nbsp; :key="'f' + i">&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; :type="field.type"&nbsp; &nbsp; &nbsp; &nbsp; :name="field.name"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; v-model="formdata[field.name]"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; :placeholder="field.placeholder"/>&nbsp; &nbsp; &nbsp; <span>{{field.name}}</span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div&nbsp;&nbsp; &nbsp; &nbsp; v-show="metadata.dropdowns.length"&nbsp; &nbsp; &nbsp; v-for="(dropdown, j) in metadata.dropdowns"&nbsp;&nbsp; &nbsp; &nbsp; :key="'d' + j">&nbsp; &nbsp; &nbsp; <div>{{dropdown.name}}</div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <v-select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="width: 200px;"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="formdata[dropdown.name]"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :options="dropdown.options.map(o => o.name)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :placeholder="dropdown.placeholder" />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <button&nbsp;&nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; submit&nbsp; &nbsp; </button>&nbsp; </form></div>这是你想要实现的目标吗？我没有你的按钮，下拉列表和输入文本组件，所以我使用html输入，按钮和v选择组件来替换下拉列表您的代码中存在一些问题。v 模型不是：v 模型要使用 vue 数据变量，请使用 {{ variable_name }}，而不是 v-html我不确定编写 Object.defineProperty（） 是否正确，但我以前从未在 vue 中使用它。但是，您可以使用 this.$set/Vue.$set向数据添加新属性。https://v2.vuejs.org/v2/api/#Vue-set要将v-model分配给动态变量（动态 field.name 在你的情况下），我会做的是声明一个空对象，并将动态属性分配给对象。在这种情况下，v 模型=“表单数据[field.name]”而不是 v 模型=“field.name”。