Vue中实现复选框勾选时动态修改对应图片的方法

首先先修正模板里的一个小问题：v-for的key应该绑定item.id而不是store.id，否则会导致列表渲染异常，修正后的模板开头是：

<div v-for="item in store.items" :key="item.id">

接下来分两种常见场景实现图片切换：

场景1：每个项有独立的勾选后图片 #

步骤1：给store的items添加勾选图片路径 #

在state的每个item对象里新增checkedUrl字段，存储勾选后的图片地址：

state: () => ({
   checkeds: [],
   items: [
     {
       "id": "1",
       "url": "../assets/imagen.svg",
       "checkedUrl": "../assets/imagen-checked.svg", // 勾选后显示的图片
       "title": "imagen"
     },
     {
       "id": "2",
       "url": "../assets/imagen2.svg",
       "checkedUrl": "../assets/imagen2-checked.svg",
       "title": "imagen2"
     },
     // 其他项同理补充checkedUrl
   ]
})

步骤2：动态绑定图片src #

在<img>标签里用三元表达式判断当前项是否被勾选（即item.title是否在checkeds数组中），切换对应的图片地址：

<img 
  :src="store.checkeds.includes(item.title) ? item.checkedUrl : item.url" 
  :alt="item.title" 
  width="30"
  height="30"
>

场景2：所有项勾选后用同一张通用图片 #

如果不需要每个项单独的勾选图，直接用统一的选中图标，那不用修改store，直接在模板里写死替换路径即可：

<img 
  :src="store.checkeds.includes(item.title) ? '../assets/common-checked.svg' : item.url" 
  :alt="item.title" 
  width="30"
  height="30"
>

进阶：用计算属性简化模板 #

如果觉得模板里的判断逻辑太啰嗦，可以在组件里定义计算属性，提前处理每个项的勾选状态：

// 组件的computed选项中
computed: {
  processedItems() {
    const checkeds = this.$store.state.checkeds;
    return this.$store.state.items.map(item => ({
      ...item,
      isChecked: checkeds.includes(item.title)
    }))
  }
}

然后模板里遍历这个计算属性，图片绑定更简洁：

<div v-for="item in processedItems" :key="item.id">
  <input 
    type="checkbox"
    :value="item.title"
    v-model="$store.state.checkeds"
    :id="item.id"
  >
  <img 
    :src="item.isChecked ? item.checkedUrl : item.url" 
    :alt="item.title" 
    width="30"
    height="30"
  >
</div>

内容的提问来源于stack exchange，提问作者Luis Fernando Perez Varajas