动态添加新行到 table

Question

我正在用 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 行！

我该如何解决？

Answer 1

由于代码有限且没有工作示例，很难给出具体的答案。通过查看代码，我认为您正在获取 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 行。

Answer 2

添加到现有的答案，这是一个简单的工作示例。

<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>

动态添加新行到 table

Dynamically add new rows to the table

javascript

html

alpine.js