Me gustaría obtener el valor de data-url en:
{#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}La función es:
const goToPage = (e) => { var slug = e.target.querySelector("item").getAttribute("url"); console.log("slug is:", slug); window.location.href = slug; };Sin embargo, no funciona y me sale
Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')He probado otras cosas como
e.target.querySelector("item").getAttribute("data-url");y
e.target.getAttribute("data-url");pero ninguno de ellos funcionó.
La forma más simple y directa es simplemente pasar el slug como argumento a la función:
<div data-url={p.url} class="item" on:click={() => goToPage(p.url)}>y la función se convierte en:
const goToPage = (slug) => { console.log("slug is:", slug); window.location.href = slug; };e.target hace referencia a lo que acaba de hacer clic, deberá usar currentTarget en su lugar y no necesita hacer querySelector
P.EJ:
var slug = e.currentTarget.getAttribute("data-url");He hecho un ejemplo básico.
function goToPage(e){ console.debug(e.currentTarget.getAttribute('data-url')); } <div data-url="https://google.com" class="item" onClick="goToPage(event)"> <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> <div data-url="https://google2.com" class="item" onClick="goToPage(event)"> <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>