>source

데이터베이스 데이터를 기반으로 여러 입력을 표시하는 양식이 있으며 각각을 가져와야합니다.입력 value 플러스 그들의 id 양식을 제출할 때.

이 양식을 보낼 때의 최종 결과는 다음과 같습니다.

array:2 [
    0 => [
        id => 1,
        value => "123
    ],
    1 => [
        id => 5,
        value => "test"
    ]
]

현재 내가 얻는 것은 (값만)입니다.

array:2 [
  0 => "123"
  1 => "test"
]

암호

<form ref="form" :model="form" enctype="multipart/form-data">
    <div class="row">
        <div
        class="col-md-6"
        v-for="(field, index) in fields"
        :key="index"
        >
        <input
            class="form-control"
            v-model="form.field[index]"
            :placeholder="field.title"
        />
        </div>
    </div>
    <vs-button
        class="mt-3"
        @click="onSubmit"
        native-type="submit"
        gradient
    >
        Generate
    </vs-button>
</form>
data() {
    return {
      fields: [],
      form: {
        field: [],
      },
    };
},
methods: {
     onSubmit(e) {
      e.preventDefault();
      axios
        .post("/api/admin/documents/add/", this.form, {...} // sending "this.form"
}

어떤 생각?

  • 답변 # 1

    이것이 도움이되는지 알려주세요.

    var app = new Vue({
          el: '#app',
         data() {
        return {
          message: "Vue 2",
          fields: ["First Name", "Last Name"],
          myForm: []
        };
      },
      mounted() {
        this.myForm = this.fields.map((field, index) => ({
          id: index+1,
          title: field,
          value: ""
        }));
      },
      methods: {
        save(){
          console.log(this.myForm)
        }
      }
        })
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
        <h1>{{ message }}</h1>
        <div>
          <div v-for="(form, index) of myForm">
            <label>{{ form.title }}</label>
            <input :placeholder="form.title" v-model="form.value" name="index" />
          </div>
          <button type="submit" @click.stop.prevent="save">Submit</button>
        </div>
        <p>{{myForm}}</p>
    </div>
    
    

관련 자료

  • 이전 oracle - 파티션 테이블 초기 수정시 ORA-14257을 해결하는 방법
  • 다음 ios - alamofire 어설 션 실패 - neednewbodystream이 uploadrequest를 찾지 못했습니다