在事件委托中获取元素数据

通常在遍历列表时会利用事件委托优化列表点击,将列表的点击事件委托到父元素上.

比如有这么一个列表:

const list = [
  { id: 1, text: '内容1' },
  { id: 2, text: '内容2' },
  { id: 3, text: '内容2' },
]

<div>
  <ul class="ul" @click="handelLiClick">
    <li v-for="{ id, text } in list" :key="id" class="li">{{ text }}</li>
  </ul>
</div>

想要获取到点击的li的索引,利用parentNode可以这样写:

handelLiClick({ target }) {
  const {
    classList,
    parentNode: { children },
  } = target
  if (classList.contains('li')) {
    const index = Array.from(children).indexOf(target)
  }
}

还可以利用元素的自定义属性这样写

<ul class="ul" @click="handelLiClick">
  <li v-for="{ id, text } in list" :key="id" :data-id="id" class="li">
    {{ text }}
  </li>
</ul>

将数据的唯一标识id存储在data-id属性中,然后在事件处理函数中获取到id.

handelLiClick({
  target: {
    classList,
    dataset: { id }
  }
}) {
  if (classList.contains('li')) {
    console.log(id)
  }
}