Связывание значений для передачи в on: click callback (тег привязки) - PullRequest
Новая
       10

Связывание значений для передачи в on: click callback (тег привязки)

1 голос
/ 29 апреля 2019

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

Вопрос: как передать значения в обратный вызов после события on: click?Вот как я делаю это на обычном javascript: 

<script>
  const items = [
    {
      text: "Home",
      url: "/"
    },
    {
      text: "Workarea",
      url: "/workarea"
    },
    {
      text: "Notes",
      url: "/notes"
    },
    {
      text: "Conf",
      url: "/conf"
    }
  ];

function click(obj,e) {
  e.preventDefault()
  var activeItem = obj.id
}
</script>

//HTML

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    {#each items as item}
        <li class="list-group-item">
            <a 
            on:click={onItemClick}
            href={item.url}
            >{item.text}</a>
        </li>
    {/each}
  </ul>
</div>

Я проверил API и попытался безуспешно использовать директивы bind:xxxx.

Я ожидаю, что код сможетобновите текущий активный элемент боковой панели после нажатия на него.

1 Ответ

3 голосов
/ 29 апреля 2019

Вам нужно передать item вашему обработчику: 

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    {#each items as item}
      <li class="list-group-item">
        <a 
          on:click={() => onItemClick(item)}
          href={item.url}
        >{item.text}</a>
      </li>
    {/each}
  </ul>
</div>
...