Início / coding / Perguntas / 79370135
Accepted
lonix
Asked: 2025-01-20 09:58:54 +0800 CST

Atualizar linha da tabela com busca assíncrona usando alpinejs

  • 772

Cada linha da tabela tem uma célula com alguns dados "caros" carregados sob demanda; antes de serem carregados, ela mostra "?". Quando o botão dessa linha é clicado, a célula é preenchida.

<table>
  <tbody>

    <!-- rows 1..10  -->

    <tr x-data="{ foo: '?' }">
      <td><span x-text="foo"></span></td>
      <!-- ... -->
      <td><button onclick="foo = await fetchFoo('row-11')">Load</button></td>
    </tr>

    <!-- rows 12... -->

  </tbody>
</table>

<script>
  async function fetchFoo(rowId) {
    let url      = `https://www.example.com/foo/${rowId}`;
    let response = await fetch(url);
    let result   = await response.text();
    return result;
  }
</script>

Como passo os dados buscados do botão para a célula?

ATUALIZAR

Aqui está uma demonstração mostrando que não funciona; tentei várias sintaxes:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>

<table>
  <tbody>
    <tr x-data="{ foo: '?' }">
      <td>Hello</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="foo = await fetchFoo('row-1')">Load</button></td>
    </tr>
    <tr x-data="{ foo: '?' }">
      <td>World</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="async () => { foo = await fetchFoo('row-2') }">Load</button></td>
    </tr>
    <tr x-data="{ foo: '?' }">
      <td>Hi</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="fetchFoo('row-3')">Load</button></td>
    </tr>
    <!-- rows 4+... -->
  </tbody>
</table>

<script>
  async function fetchFoo(rowIndex) {
    return new Promise(resolve => setTimeout(() => resolve(rowIndex), 1000));
  }
</script>

javascript

1 respostas

  1. Best Answer

    Você deve alterar o onclick para x-on:click:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>

<table>
  <tbody>
    <tr x-data="{ foo1: '?' }">
      <td>Hello</td>
      <td><span x-text="foo1"></span></td>
      <td><button x-on:click="foo1 = await fetchFoo('row-1')">Load</button></td>
    </tr>
    <!-- rows 4+... -->
  </tbody>
</table>

<script>
  async function fetchFoo(rowIndex) {
    return new Promise(resolve => setTimeout(() => resolve(rowIndex), 1000));
  }
</script>

    ATUALIZAR :

    ao usar "onclick" você está usando diretivas básicas do js, ​​você deve usar x-on:click para usar as diretivas do alpine.

    • 2

relate perguntas