Vue 实现图片在循环中 默认 和 选中 之间的点击切换

Vue 实现图片在循环中 默认 和 选中 之间的点击切换

html

<ul style="font-size:20px;">
  <li
    :key="lesson.name"
    @click="changeLesson(lesson.name, index)"
    style="font-size:20px;"
    v-for="(lesson, index) in lessonList"
  >
    <img
      :src="activeIndex === index ? lesson.imgPathSelected : lesson.imgPathDefault"
      alt="icon"
    />
    <span>{{lesson.name}}</span>
  </li>
</ul>

数据格式：

js：

 methods: {
  changeLesson(name, index) {
    this.activeIndex = index
  }
},