Я использую Laravel 5.7
и VueJs 2.5.*
...
Сначала я столкнулся с этой проблемой: Добавление динамических полей ввода
Я хочу создать приложение для выставления счетов, поэтому в счете есть много InvoiceItems.
Когда я могу добавить или удалить динамические поля ввода для элементов, у меня возникнет другая проблема. Когда я добавляю более одного поля ввода для элементов и пытаюсь заполнить данные для InvoiceItems, все остальные поля ввода автоматически заполняются теми же данными, которые я ввел.
У меня есть две таблицы: одна для счета-фактуры, а другая - для элементов счета-фактуры.
Вот мой код <script>
:
<script>
export default {
data() {
return {
ticketInvoices: {},
ticketInvoiceItems: [],
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: "",
ticketInvoiceItems: [{
id: "",
ticket_invoice_id: "",
passenger_name: "",
ticket_no: "",
flight_no: "",
departure_date: "",
sector: "",
fares: "",
tax_SB: "",
tax_SRP: "",
tax_PB: "",
tax_OAD: "",
total_tax_breakup: "",
sub_total: ""
}]
})
};
},
methods: {
addItems() {
this.ticketInvoiceItems.push({
id: "",
passenger_name: "",
ticket_no: "",
flight_no: "",
departure_date: "",
sector: "",
fares: "",
tax_SB: "",
tax_SRP: "",
tax_PB: "",
tax_OAD: "",
total_tax_breakup: "",
sub_total: ""
});
},
removeItems(pos) {
this.ticketInvoiceItems.splice(pos, 1);
},
<script>
Вот мой код HTML
:
<tbody>
<tr v-for = "(ticketInvoiceItem, pos) in ticketInvoiceItems" :key = "pos">
<!--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_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>
<td>
<!--Total Taxes Break Up-->
<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 v-on:click = "removeItems(pos);" 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 @click = "addItems" class = "btn btn-default" style = "background-color: transparent;"><i
class = "fas fa-check-circle text-green"></i></button>
</tbody>
Ваш код немного избыточен и имеет запутанную структуру данных. Вы зацикливаетесь и продвигаетесь к ticketInvoiceItems
, но у вас также есть form.ticketInvoiceItems
, который, похоже, имеет ту же структуру. Какой из них вы действительно хотите использовать?
Ваши атрибуты v-модели тоже не используются. Вы привязываетесь к одним и тем же свойствам формы на каждой итерации цикла.
Вам нужно будет использовать информацию в вашем цикле при вводе атрибута v-model, позволяя входам точно знать, к какому имени пассажира они должны быть привязаны:
Либо с помощью индекса (pos):
<input v-model = "ticketInvoiceItems[pos].passenger_name" />
Или, поскольку ваш цикл v-for определяет ticketInvoiceItem:
<input v-model = "ticketInvoiceItem.passenger_name" />
Пожалуйста, проверьте, нужно ли еще что-нибудь исправить. @Devon
Как я уже сказал выше, у вас определены повторяющиеся массивы ticketInvoiceItem. В остальном, если это решило вашу проблему, примите это как ответ.
Не достал @Devon, где я его дублировал ??? мой код <script>
в порядке или мне нужно внести некоторые изменения?
Как ты сказал, я просто использую
ticketInvoiceItems[pos].pessenger_name
вместоform.passenger_name
, теперь у меня не возникает этой проблемы. Я просто хочу спросить, все ли в порядке с моим<script>
?