vuejs를 사용하여 모델을 동적으로 생성할 때 DOM 컨트롤에서 값을 가져오는 방법

vuejs를 사용하여 모델을 동적으로 생성할 때 DOM 컨트롤에서 값을 가져오는 방법

표시할 DOM 컨트롤이 API 서비스에서 채워지는 동적 폼 생성기 컴포넌트를 만들고 있습니다.모델 키(:v-model)도 동적으로 추가됩니다.사용자가 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>

위의 코드, 모델 및 스키마.필드가 비동기 Axios API 호출에서 입력되고 있습니다.

"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]에 정적 값을 전달하면 값이 표시됩니다.필드 키에 일련의 컨트롤이 있다고 가정합니다.제출함수에서 폼의 값을 얻을 수 있도록 도와주세요.

문서에서 볼 수 있듯이 컴포넌트 속성의 값을 변경할 수 없습니다.내부 컴포넌트 내부에 지원 개체를 생성하여 그 값을 메인컴포넌트로 전송해야 합니다.예를 들어 스키마 구조에 따라 innerModel을 작성한 후 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>

언급URL : https://stackoverflow.com/questions/53263159/how-to-get-the-values-from-the-dom-controls-when-the-models-are-created-dynamica