如何在svelte中获取事件目标的数据属性？

Question

我想获得以下值data-url：

  {#each profiles as p}
    <div data-url={p.url} class="item" on:click={goToPage}>
      <div class="row">
        <div class="col s12 l4">
          <div class="a">
             <br />
          </div>
        </div>
        <div class="col s12 l8">
          <p>
            <strong>{p.fn} {p.ln}</strong><br />
            {p.ttl}
          </p>
        </div>
      </div>
      {p.dsc}
       <hr />
    </div>
  {/each}

其功能是：

  const goToPage = (e) => {
     var slug = e.target.querySelector("item").getAttribute("url");
    console.log("slug is:", slug);
    window.location.href = slug;
  };

然而它不起作用，我得到

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

我尝试过其他事情，比如

e.target.querySelector("item").getAttribute("data-url");

和

e.target.getAttribute("data-url");

但它们都不起作用。

Answer 1

最简单、最直接的方法是将 slug 作为参数传递给函数：

<div data-url={p.url} class="item" on:click={() => goToPage(p.url)}>

函数变为：

const goToPage = (slug) => {
  console.log("slug is:", slug);
  window.location.href = slug;
};