动态添加新行到 table
Dynamically add new rows to the table
我正在用 alpinejs 创建一个 table,如果有人点击“点击添加”,它应该 returns 新行 link
我有这个代码:
<div class="mt-2" x-data="services()">
<tbody class="bg-gray-200" x-model="newService" x-show="services.length">
<template x-for="service in services" :key="service.id">
<td x-text="services.length" >
<a @click="addService()">Click to add more</a>
<script>
function services() {
return {
services: [],
,
newService: '',
addService() {
this.services.push({
id: this.services.length + 1,
body: this.newService,
completed: false
});
this.newService = '';
},
deleteService(service){
let position = this.services.indexOf(service);
this.services.splice(position, 1);
}
}
}
</script>
但它没有返回新行,而是 returns 23 行!
我该如何解决?
由于代码有限且没有工作示例,很难给出具体的答案。通过查看代码,我认为您正在获取 table body.
中的现有行数
addService() {
this.services.push({
id: this.services.length + 1,
body: this.newService,
completed: false
});
this.newService = '';
}
在这种方法中,您选择 this.newService
作为您的 body。并查看您的 HTML <tbody class="bg-gray-200" x-model="newService" x-show="services.length">
newService 是现有 table.
的整个 body
所以你得到的是现有的 23 行。
添加到现有的答案,这是一个简单的工作示例。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<div class="mt-4 flex flex-col max-w-lg mx-auto" x-data="services()">
<div class="flex space-x-2">
<input type="text" x-model="newService" class="px-2 py-1 border flex-1 rounded" placeholder="Service">
<button class="border bg-blue-600 hover:bg-blue-700 text-white rounded px-4 py-1" @click="addService()">Add
service</button>
</div>
<div x-show="services.length">
<div class="rounded border mt-4 text-xs">
<table class="w-full">
<thead>
<tr>
<th class="bg-gray-100 font-normal text-gray-500 uppercase py-2">Services</th>
</tr>
</thead>
<tbody>
<template x-for="service in services" :key="service.id">
<tr class="border-t">
<td class="flex justify-between items-center px-4 py-1">
<span x-text="service.body"></span>
<button class="text-sm uppercase text-red-500 px-2 py-1 rounded hover:bg-red-100"
@click="deleteService(service.id)">x</button>
</td>
</template>
</tbody>
</table>
</div>
<button class="text-xs w-full mt-2 bg-red-100 text-red-400 px-2 py-2 rounded hover:bg-red-200" @click="services = []">Delete
All</button>
</div>
</div>
<script>
function services() {
return {
services: [{
id: 1,
body: 'Service 1',
completed: false
},
{
id: 2,
body: 'Service 2',
completed: false
}
],
newService: '',
addService() {
if (this.newService.length < 1) return;
this.services.push({
id: Date.now(),
body: this.newService,
completed: false
});
this.newService = '';
},
deleteService(serviceId) {
let position = this.services.findIndex(el => el.id == serviceId);
this.services.splice(position, 1);
}
}
}
</script>
我正在用 alpinejs 创建一个 table,如果有人点击“点击添加”,它应该 returns 新行 link
我有这个代码:
<div class="mt-2" x-data="services()">
<tbody class="bg-gray-200" x-model="newService" x-show="services.length">
<template x-for="service in services" :key="service.id">
<td x-text="services.length" >
<a @click="addService()">Click to add more</a>
<script>
function services() {
return {
services: [],
,
newService: '',
addService() {
this.services.push({
id: this.services.length + 1,
body: this.newService,
completed: false
});
this.newService = '';
},
deleteService(service){
let position = this.services.indexOf(service);
this.services.splice(position, 1);
}
}
}
</script>
但它没有返回新行,而是 returns 23 行!
我该如何解决?
由于代码有限且没有工作示例,很难给出具体的答案。通过查看代码,我认为您正在获取 table body.
中的现有行数addService() {
this.services.push({
id: this.services.length + 1,
body: this.newService,
completed: false
});
this.newService = '';
}
在这种方法中,您选择 this.newService
作为您的 body。并查看您的 HTML <tbody class="bg-gray-200" x-model="newService" x-show="services.length">
newService 是现有 table.
所以你得到的是现有的 23 行。
添加到现有的答案,这是一个简单的工作示例。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>
<div class="mt-4 flex flex-col max-w-lg mx-auto" x-data="services()">
<div class="flex space-x-2">
<input type="text" x-model="newService" class="px-2 py-1 border flex-1 rounded" placeholder="Service">
<button class="border bg-blue-600 hover:bg-blue-700 text-white rounded px-4 py-1" @click="addService()">Add
service</button>
</div>
<div x-show="services.length">
<div class="rounded border mt-4 text-xs">
<table class="w-full">
<thead>
<tr>
<th class="bg-gray-100 font-normal text-gray-500 uppercase py-2">Services</th>
</tr>
</thead>
<tbody>
<template x-for="service in services" :key="service.id">
<tr class="border-t">
<td class="flex justify-between items-center px-4 py-1">
<span x-text="service.body"></span>
<button class="text-sm uppercase text-red-500 px-2 py-1 rounded hover:bg-red-100"
@click="deleteService(service.id)">x</button>
</td>
</template>
</tbody>
</table>
</div>
<button class="text-xs w-full mt-2 bg-red-100 text-red-400 px-2 py-2 rounded hover:bg-red-200" @click="services = []">Delete
All</button>
</div>
</div>
<script>
function services() {
return {
services: [{
id: 1,
body: 'Service 1',
completed: false
},
{
id: 2,
body: 'Service 2',
completed: false
}
],
newService: '',
addService() {
if (this.newService.length < 1) return;
this.services.push({
id: Date.now(),
body: this.newService,
completed: false
});
this.newService = '';
},
deleteService(serviceId) {
let position = this.services.findIndex(el => el.id == serviceId);
this.services.splice(position, 1);
}
}
}
</script>