Блог

Главная - Вопросы по программированию - Как получить атрибут данных цели события в svelte?

Как получить атрибут данных цели события в svelte?

#javascript #svelte

Вопрос:

Я хотел бы получить значение 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");

но ни один из них не сработал.

Комментарии:

1. Используйте для этого привязку атрибутов. svelte.dev/документы#свойство bind_element_property

2. @SandipNirmal это неприменимо, потому что div находится в цикле, и здесь есть несколько someUrl s.

Ответ №1:

Самый простой и простой способ-просто передать пули в качестве аргумента функции вместо этого:

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

и функция становится:

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

Комментарии:

1. Да! таким образом, атрибут данных data-url={p.url} даже не нужен, и мы избавлены от взаимодействий объекта события javascript. Спасибо за совет.

Ответ №2:

e.target ссылается на то, что вы только что нажали, вам нужно будет использовать currentTarget вместо этого, и вам не нужно этого делать querySelector

напр.:

 var slug = e.currentTarget.getAttribute("data-url");

Я привел простой пример

 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>

Комментарии:

1. Это работает, но это удар и промах. Пожалуйста, обратитесь к моему отредактированному вопросу. Я бы хотел, чтобы все div class="item" это было закреплено.

2. @Babr Не на 100% ясно, что вам нужно, было бы полезно просмотреть весь код — если это происходит в цикле, то определенно много упущенного контекста в том, чего вы пытаетесь достичь, что было бы полезно для вас

3. Правильно, я добавил div в цикл (немного сокращенно). Пожалуйста, ознакомьтесь с вопросом. В принципе, я бы хотел, чтобы весь div был доступен для кликабельности.

4. @Babr Я расширил свой ответ и включил рабочий фрагмент.

5. Это тоже не работает. Я сажусь slug is: null за пульт.

Метки: