programing

VueJ를 사용한 동적 입력 필드 추가

prostudy 2022. 7. 7. 22:28
반응형

VueJ를 사용한 동적 입력 필드 추가

사용하고 있다Laravel 5.7&VueJs 2.5.*...

동적으로 입력 필드를 추가하는 방법은 알고 있지만, 앱의 경우 어떻게 해야 하는지 모르겠습니다.티켓이 있습니다.청구서.그 페이지에는 청구서를 작성 및 갱신하기 위한 부트스트랩 모달도 있습니다.2개의 saperate DB 테이블이 있습니다.TicketInvoice기타 용TicketInvoiceItems....TicketInvoiceItems어레이가 되는 이유는TicketInvoice많다TicketInvoiceItems.

나의<script>태그, 여기 모든 것이 있습니다.TicketInvoice필드:

<script>
  export default {
    data() {
      return {

        ticketInvoices: {},
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_taxes_grand_total: "",
          ticket_invoice_grand_total: "",
          ticket_invoice_grand_total_words: "",
          ticket_invoice_terms: "",

        })
      };
    },
</script>

TicketInvoiceItems=Data이 필드를 동적으로 추가했으면 합니다.

<script>
export default {
  data() {
    return {

     form: new Form({
    ticketInvoiceItems: [{

      ticket_invoice_id: '',
          passenger_name: '',
          ticket_no: '',
          flight_no: '',
          departure_date: '',
          sector: '',
          fares: '',
          tax_SB: '',
          tax_SRP: '',
          tax_YQ: '',
          tax_RG: '',
          tax_PK: '',
          tax_YR: '',
          tax_SF: '',
          tax_PTT: '',
          tax_OAS: '',
          tax_PSF: '',
          tax_PB: '',
          tax_OAD: '',
          total_tax_breakup: '',
          sub_total: ''
        }]
    };
  },
</script>

여기 제 것이 있습니다.HTML코드:

<tbody>
<tr>

<!--Passenger Name-->
<td>
    <input v-model="form.passenger_name" size="40" type="text" name="passenger_name"    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }">
    <has-error :form="form" field="passenger_name"></has-error>
</td>

<!--Ticket No.-->
<td>
    <input v-model="form.ticket_no" size="24" type="text" name="ticket_no" class="table-    control form-control" :class="{ 'is-invalid': form.errors.has('ticket_no') }">
    <has-error :form="form" field="ticket_no"></has-error>
</td>

<!--Flight No.-->
<td>
    <input v-model="form.flight_no" size="7" type="text" name="flight_no" class="table- control form-control" :class="{ 'is-invalid': form.errors.has('flight_no') }">
    <has-error :form="form" field="flight_no"></has-error>
</td>

<!--Departure Date-->
<td>
    <input v-model="form.departure_date" type="date" name="departure_date" class="table-    control form-control" :class="{ 'is-invalid': form.errors.has('departure_date') }">
    <has-error :form="form" field="departure_date"></has-error>
</td>

<!--Sector-->
<td>
    <input v-model="form.sector" type="text" name="sector" class="table-control form-   control" :class="{ 'is-invalid': form.errors.has('sector') }">
    <has-error :form="form" field="sector"></has-error>
</td>

<!--DROPDOWN MENU-->
<td>
<div class="dropdown">

    <button class="btn btn-secondary dropdown-toggle" type="button"     id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-   expanded="false">
    </button>
<div class="dropdown-menu form-group" aria-labelledby="dropdownMenuButton">

<form class="px-1 py-1">

<!--Taxes BreakUp-->
    <input v-model="form.tax_SB" type="number" name="tax_SB" placeholder="SB"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SB') }">
    <has-error :form="form" field="tax_SB"></has-error>

    <input v-model="form.tax_SRP" type="number" name="tax_SRP" placeholder="SRP"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SRP') }">
    <has-error :form="form" field="tax_SRP"></has-error>

    <input v-model="form.tax_YQ" type="number" name="tax_YQ" placeholder="YQ"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YQ') }">
    <has-error :form="form" field="tax_YQ"></has-error>

    <input v-model="form.tax_RG" type="number" name="tax_RG" placeholder="RG"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_RG') }">
    <has-error :form="form" field="tax_RG"></has-error>

    <input v-model="form.tax_PK" type="number" name="tax_PK" placeholder="PK"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PK') }">
    <has-error :form="form" field="tax_PK"></has-error>

    <input v-model="form.tax_YR" type="number" name="tax_YR" placeholder="YR"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YR') }">
    <has-error :form="form" field="tax_YR"></has-error>

    <input v-model="form.tax_SF" type="number" name="tax_SF" placeholder="SF"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SF') }">
    <has-error :form="form" field="tax_SF"></has-error>

    <input v-model="form.tax_PTT" type="number" name="tax_PTT" placeholder="PTT"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PTT') }">
    <has-error :form="form" field="tax_PTT"></has-error>

    <input v-model="form.tax_OAS" type="number" name="tax_OAS" placeholder="OAS"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAS') }">
    <has-error :form="form" field="tax_OAS"></has-error>

    <input v-model="form.tax_PSF" type="number" name="tax_PSF" placeholder="PSF"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PSF') }">
    <has-error :form="form" field="tax_PSF"></has-error>

    <input v-model="form.tax_PB" type="number" name="tax_PB" placeholder="PB"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PB') }">
    <has-error :form="form" field="tax_PB"></has-error>

    <input v-model="form.tax_OAD" type="number" name="tax_OAD" placeholder="OAD"
    class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAD') }">
    <has-error :form="form" field="tax_OAD"></has-error>
</form>
</div>
</div>
</td>

<!--Total Taxes Break Up-->
<td>
    <input v-model="form.total_tax_breakup" type="number" size="10"     name="total_tax_breakup" class="table-control form-control" :class="{ 'is-invalid':     form.errors.has('total_tax_breakup') }">
    <has-error :form="form" field="total_tax_breakup"></has-error>
</td>

<!--Fares-->
<td>
    <input v-model="form.fares" type="number" size="10" name="fares" class="table-control   form-control" :class="{ 'is-invalid': form.errors.has('fares') }">
    <has-error :form="form" field="fares"></has-error>
</td>

<!--Sub Total -->
<td>
    <input v-model="form.sub_total" type="number" size="10" name="sub_total" class="table-  control form-control" :class="{ 'is-invalid': form.errors.has('sub_total') }">
    <has-error :form="form" field="sub_total"></has-error>
</td>

<!--Remove Button-->
<td>
    <button class="btn btn-default form-control" style="background-color: transparent;"><i  class="fas fa-times-circle text-fade-red"></i></button>
</td>
</tr>

<!--Add Button-->
    <button class="btn btn-default" style="background-color: transparent;"><i class="fas fa-    check-circle text-green"></i></button>
</tbody>

여기에 이미지 설명 입력

필요한 모든 필드가 포함된 템플릿을 추가해야 합니다.모두 텍스트 필드라고 가정합니다.

<script>
export default {
    data() {
        return {
            formFields: [
                "passenger_name",
                "ticket_no",
                "flight_no",
                "departure_date",
                "sector",
            ]
            ...
        }
    }
}

그런 다음 다음과 같이 필드를 양식에 동적으로 추가할 수 있습니다.

<td v-for="(fieldName, pos) in formFields" :key="pos">
    <input v-model="form[fieldName]" size="40" type="text" :name="fieldName" class="table-control form-control" :class="{ 'is-invalid': form.errors.has(fieldName) }">
    <has-error :form="form" :field="fieldName"></has-error>
</td>

이것은 동적 필드를 vue 양식에 추가하는 간단한 방법입니다.

폼:

<form>
....other fields.....
//dynamic fields section start

<div class="form-group row" v-for="(skill, k) in form.skills" :key="k">
   <label for="skill" class="col-md-4 col-form-label text-md-right">Skills</label>
   <div class="col-md-4">
    <input id="skill" v-model="skill.skill" type="text" class="form-control"
      name="skills[][skill]" value="" required 
      :class="{ 'is-invalid': form.errors.has('skill') }">
      <has-error :form="form" field="skill"></has-error>
   </div>
<div class="col-md-2">
    <span v-if="k > 0" @click.prevent="remove(k)"><i class="fa fa-trash"></i></span>
   </div></div>
   <div class="col-md-12 text-center"><button class="btn btn-success" 
        @click.prevent="addMore()">Add</button>
    </div>

//Dynamic fields section end
</form>

스크립트 섹션에 다음 스크립트 코드를 추가합니다.

<script>
 data() {
      return {
        form: new Form({
          name: '',
          email: '',
          user_skill: {
              skill: ''
          },
          skills: [],
        }),
      }
    },
methods: {

        addMore() {
            this.form.skills.push(Vue.util.extend({}, this.form.skill));
        },
        remove(index) {
          this.form.skills.splice(index, 1);
        },
}

이 방법을 사용하여 잘 작동하기를 바랍니다.

언급URL : https://stackoverflow.com/questions/52892112/adding-dynamic-input-fields-with-vuejs

반응형
저작자표시 (새창열림)

'programing' 카테고리의 다른 글

긴 vs 정수, 긴 vs int, 무엇을 언제 사용할 것인가?  (0) 2022.07.07
C: POSIX 스레드를 사용하여 재귀 뮤텍스를 선언하려면 어떻게 해야 합니까?  (0) 2022.07.07
기본 포인터와 스택 포인터란 정확히 무엇입니까?그들은 무엇을 가리키고 있나요?  (0) 2022.07.07
vue-google-map set infow는 마커 위에 있습니다.  (0) 2022.07.07
Java: 범용 유형에서 클래스 리터럴을 가져오려면 어떻게 해야 합니까?  (0) 2022.07.07

'programing'의 다른글

  • 현재글VueJ를 사용한 동적 입력 필드 추가

관련글

댓글

티스토리툴바