Как получить значения из элементов управления DOM, когда модели создаются динамически с помощью vuejs - PullRequest
Новая
       6

Как получить значения из элементов управления DOM, когда модели создаются динамически с помощью vuejs

0 голосов
/ 12 ноября 2018

Я создаю компонент генератора динамических форм, в котором отображаемые элементы управления DOM заполняются службой API. Ключ модели, то есть: v-модель, также добавляется динамически. Я не могу получить доступ к данным, которые пользователь вводит в элемент управления DOM.

Компонент, из которого все данные передаются в генератор форм 

<template>
   <form-generator :schema="schema" :model="model" :options="formOptions"></form-generator>
</template>
<script>
   export default {
      components: {
        FormGenerator
      },
      data() {
        return {
          model: {},
          schema: {
            fields: [{"id":"dcno1","label":"DC No.","model":"dcno","name":"dcno","ref":"dcno","className":"","type":"input","inputType":"text","required":true,"order":2}]
          }
      }
    }
</script>

В приведенном выше коде поля model и schema.fields заполняются вызовом API-интерфейса async axios.

Если мы передадим значение в модель для модели с именем "dcno", значение будет заполнено в элементе управления вводом

Компонент динамического генератора форм 

<template>
   <v-form v-if='schema!==null' v-model="model.valid" ref="form" lazy-validation>
     <v-flex xs6 v-for='(formItem,index) in schema.fields' v-bind:key='index'>
         <v-text-field :v-model='formItem.model' ref="formItem.model" 
            :label='formItem.label' :rules='formItem.rules' 
            :value='model[formItem.model]'
            :type='formItem.inputType' :value='model[formItem.model]' 
            :id='formItem.id'>
         </v-text-field>
      </v-flex>
      <v-btn class='float-right' color="primary" @click="submitForm">Submit</v-btn>
   </v-form>
</template>
<script>
   export default {
     name: 'form-generator',
     components: {
     },
     props: {
     schema: Object,
     model: Object
     },
     methods:{
         submitForm: function(e) {
            //how to access the form model values here
         }
     }
   }
</script>

При передаче статического значения в модель dcno: value = 'model [formItem.model]' значение отображается. Рассмотрим ключ полей имеет набор элементов управления. Пожалуйста, помогите мне получить значения формы в функции отправки.

1 Ответ

0 голосов
/ 13 ноября 2018

Как вы можете видеть в документах, вы не можете изменить значение свойства компонента, вам нужно создать вспомогательный объект внутри внутреннего компонента и передать его значение главному компоненту.Взгляните на пример: я создаю innerModel на основе структуры схемы, а затем отслеживаю все изменения в innerModel. 

Vue.config.devtools = false;
Vue.config.productionTip = false;
const formGenerator = Vue.component('form-generator', {
  props: ['schema', 'value'],
  data() {
    return {
      innerModel: [],
    }
  },
  watch: {
    schema: {
      deep: true,
      immediate: true,
      handler() {
        this.innerModel = this.schema.fields.map((field) => ({
          // pass here any other property you need
          name: field.name,
          value: field.model,
        }));
      },
    },
    innerModel: {
      deep: true,
      immediate: true,
      handler(value) {
        this.$emit('input', value);
      },
    }
  },
  methods: {
    submitForm: function(e) {
      e.preventDefault();
      // convert innerModel into an object if needed
      console.log(this.innerModel);
    }
  },
  template: `
  	<form @submit="submitForm">
    	<input
      	:key="model.name"
        v-model="model.value"
        v-for="model in innerModel">
    	<button type="submit">SUBMIT</button>
    </form>
  `
})

new Vue({
  el: '#app',
  components: {
    formGenerator
  },
  data: {
    model: {},
    schema: {
      fields: [{
        id: "dcno1",
        label: "DC No.",
        model: "dcno",
        name: "dcno",
        ref: "dcno",
        className: "",
        type: "input",
        inputType: "text",
        required: true,
        order: 2
      }]
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <form-generator :schema="schema" v-model="model"></form-generator>
  <h2>Changing model</h2>
  {{ model }}
</div>
...