Блог

Я создаю таблицу с помощью alpinejs, она должна возвращать новую строку, если кто-то нажмет ссылку «нажмите, чтобы добавить».

У меня есть этот код:

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

но вместо возврата новой строки он возвращает 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> 

С ограниченным кодом и без рабочего примера немного сложно дать конкретный ответ. Посмотрев на код, я думаю, что вы получаете существующее количество строк в теле таблицы.

 addService() {
    this.services.push({                                        
        id: this.services.length   1,                           
        body: this.newService,                               
        completed: false                                        
    });                                                         
    this.newService = '';                                       
}
 

В этом методе вы выбираете this.newService в качестве своего тела. И, глядя на ваш HTML <tbody class="bg-gray-200" x-model="newService" x-show="services.length"> -новостной сервис, вы видите весь текст существующей таблицы.

Таким образом, вы получаете существующие 23 строки.