#alpine.js
Вопрос:
Я пытаюсь создать таблицу, включающую таблицу в каждой строке, и вложенный x-for используется с alpine.js.При нажатии кнопки, расположенной в правом нижнем углу таблицы, добавляется новая строка, и все ячейки в строках имеют одинаковое значение. Я не мог установить значения строк независимо. Не могли бы вы, пожалуйста, помочь?
Заранее спасибо за вашу помощь, Джем
function handler() {
return {
fields1: [],
fields: [],
rows: [],
addRate() {
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
},
listField() {
this.fields.splice(0);
this.fields1.splice(0);
this.rows.push({
id: this.id
});
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
this.fields.push({
value5: '3',
value6: '20',
value7: 'DC',
value8: '40',
value9: '523',
value10: '654',
value11: 'TEST',
value12: 'true',
value13: 'Class1',
value14: '5656',
value15: 'TRM78799',
id:'1'
});
},
}
};
function setDecimal(event) {
this.value = parseFloat(this.value).toFixed(3);
}; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container col-md-10 offset-md-1">
<div class="row" x-data="handler()" x-init="listField()">
<div class="col">
<table class="table align-items-center table-sm" style="text-align: center;">
<tr>
<template x-for="(row, index) in rows" :key="index">
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<tbody>
<template x-for="(field1, index) in fields1" :key="index">
<tr class="table-success">
<td style="width:100px;"><b>Type</b></td>
<td style="width:100px;">
<select x-model="field1.rType" class="custom-select" name="rType"
id="rType" required>
<option selected>---</option>
<option value="Type A">Type A</option>
<option value="Type B">Type B</option>
</select>
</td>
<td x-show="field1.rType==='Type A'" style="width:120px;">
<b>Type A Name</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.typeA" type="text" class="form-control"
name="typeA" id="typeA">
</td>
<td x-show="field1.rType==='Type A'" style="width:150px;">
<b>Value4</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.value4" type="text" class="form-control"
name="value4" id="value4">
</td>
<td x-show="field1.rType==='Type B'" style="width:120px;">
<b>From</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateFrom" type="Type B" class="form-control"
name="typeBDateFrom" id="typeBDateFrom">
</td>
<td x-show="field1.rType==='Type B'" style="width:150px;">
<b>To</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateTo" type="Type B" class="form-control"
name="typeBDateTo" id="typeBDateTo">
</td>
</tr>
</template>
</tbody>
</table>
</p>
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<thead class="thead-dark">
<tr>
<th>No</th>
<th style="width:20px;">Value5</th>
<th style="width:80px;">Value6</th>
<th style="width:150px;">Value7</th>
<th style="width:120px;">Value8</th>
<th style="width:120px;">Value9</th>
<th style="width:130px;">Value11</th>
<th style="width:180px;">Value12</th>
<th style="width:180px;">Value1</th>
<th style="width:180px;">Value2</th>
<th style="width:180px;">Value3</th>
</tr>
</thead>
<tbody>
<template x-for="(field, index) in fields" :key="index">
<tr>
<td x-text="index 1"></td>
<td x-text="field.value5"></td>
<td x-text="field.value6"></td>
<td>
<p x-text="field.value7"></p>
<p
x-show="field.value7==='RFR' | field.value7==='RFRHC'">
<span x-text="field.value8"></span><span>
amp;#x2103;</span>
</p>
</td>
<td x-text="field.value9"></td>
<td x-text="field.value10"></td>
<td x-text="field.value11"></td>
<td x-show="field.value12">
<p>
<label><b>Value13 </b><span x-text="field.value13"></span></label>
</p>
<p>
<label><b>Value14 </b><span x-text="field.value14"></span></label>
</p>
</td>
<td x-show="!field.value12">
<p>
</p>
</td>
<td class="table-success">
<input x-model="field.value1" type="number" class="form-control"
onchange="setDecimal" min="0" max="10000000" name="value1"
id="value1" step="0.001" value="0.000" required>
</td>
<td class="table-success">
<select x-model="field.value2" class="custom-select" name="value2"
id="value2" required>
<option selected>---</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</td>
<td class="table-success">
<input x-model="field.value3" type="text" class="form-control"
name="value3" id="value3">
</td>
</tr>
</template>
</tbody>
</table>
</p>
</template>
</tr>
<tr>
<td colspan="12" class="text-right"><button type="button" class="btn btn-info"
@click="listField()"> Add Row</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>