vue 点击会影响其他数据

Question

如图，需要实现以下功能，可以点击不同规格温度甜度。实现被点击的格子动态添加类“jiase”

大致的代码如下 剩余的不太清楚怎么写了 现在的问题是点击“中杯”后会同步影响到温度和甜度

<template v-for="item in guige">
    <div class="chacanshu">
        <p class="canyi">{{item.name}}：</p>
        <template v-for="(info,index) in item.info">
            <span class="da" @click="choiceInfo(index)" :class="{}">{{info.name}}</span>
        </template>
    </div>
</template>

大致数据如下

      guige: [
                {
                    name: '规格',
                    info: [
                        {name: '大'},
                        {name: '中'},
                        {name: '小'},
                    ]
                },
                {
                    name: '温度',
                    info: [
                        {name: '温热'},
                        {name: '常温'},
                        {name: '热'},
                        {name: '冰'},
                        {name: '去冰'},
                        {name: '少冰'},
                    ]
                },
                {
                    name: '甜度',
                    info: [
                        {name: '3分糖'},
                        {name: '5分糖'},
                        {name: '7分糖'},
                        {name: '9分糖'},
                    ]
                },
            ]

Answer 1

默认第一个高亮，如果不需要将此删除 || (!item.selected && index === 0)

<template v-for="item in guige">
    <div class="chacanshu">
        <p class="canyi">{{item.name}}：</p>
        <template v-for="(info,index) in item.info">
            <span class="da" 
                @click="choiceInfo(item, index)" 
                :class="{jiase: item.selected === index || (!item.selected && index === 0)}">            
                    {{info.name}}
                </span>
        </template>
    </div>
</template>

choiceInfo(item, index){
    this.$set(item, 'selected', index)
}

Answer 2

因为你只是单独传了下标index,仅这一个参数是无法完全区分开你所点击的格子，再传一个参数就好

Answer 3

你这里用的是二维数组，但是你却只用了一个index是没有办法区分的。如果要用一个数组同时维护这几行的状态，一个简单的方法就是直接在原来的guide这个数组上添加一个属性，比如楼上说的selected，以此作为标记。另外，你也可以另外用一个数组来标记，比如：

let arr = []

guide.forEach((item) => {
    let temp = Array.isArray(item.info) && item.info.map((info) => {
        return false
    })
    arr.push(temp)
})

然后通过访问arr的下标来维护这个点击的状态