0

我有一个本地状态，点击时会更改芯片图标和颜色，但是，此事件会同时触发所有芯片的更改。

我需要用户能够选择单个芯片或多个芯片。

        const chipState = reactive({
            icon: addOutline,
            color: 'tertiary',
        })

        const selectService =  () => {
            if(chipState.icon == addOutline) {
                chipState.icon = checkmark;
                chipState.color = 'success';
            } else {
                chipState.icon = addOutline;
                chipState.color = 'tertiary';
            }
        }

        return { selectService,  ...toRefs(chipState) }
<ion-chip :color="color" @click="selectService"
          v-for="s of service.services" :key="s.id">
  <ion-label>{{s.name}}</ion-label>
  <ion-icon :icon="icon"></ion-icon>
</ion-chip>

编辑

我通过将它们转换为数组来制作icon和color可变，因此chipState现在看起来像这样：

const chipState = reactive({
    icon: [addOutline],
    color: ['tertiary']
})

这使得可以参考每个芯片的索引。selectService函数现在看起来像这样：

  const selectService =  (i) => {
       if(chipState.icon[i] == addOutline) {
            chipState.icon[i] = checkmark;
             chipState.color[i] = 'success';
        } else {
             chipState.icon[i] = addOutline;
             chipState.color[i] = 'tertiary';
        }
   }

和模板：

 <ion-chip :color="color[index]" @click="selectService(index)"     
    v-for="(s, index) of service.services" :key="index">
  <ion-label>{{s.name}}</ion-label>
  <ion-icon :icon="icon[index]"></ion-icon>
 </ion-chip>

“解决方案”带来了一个新问题：我必须对iconandcolor数组中每个项目的状态进行硬编码才能使其生效。

4

0 回答 0