Vue clicks affect other data

as shown in the figure, you need to achieve the following functions. You can click on different specifications of temperature sweetness. Dynamically add the class "jiase" to the clicked grid

the approximate code is as follows. The rest is not clear how to write it. The problem now is that clicking "medium cup" will affect the temperature and sweetness synchronously

. 

<template v-for="item in guige">
    <div class="chacanshu">
        <p class="canyi">{{item.name}}:

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

the approximate figures are as follows 

      guige: [
                {
                    name: "",
                    info: [
                        {name: ""},
                        {name: ""},
                        {name: ""},
                    ]
                },
                {
                    name: "",
                    info: [
                        {name: ""},
                        {name: ""},
                        {name: ""},
                        {name: ""},
                        {name: ""},
                        {name: ""},
                    ]
                },
                {
                    name: "",
                    info: [
                        {name: "3"},
                        {name: "5"},
                        {name: "7"},
                        {name: "9"},
                    ]
                },
            ]
Javascript vue.js
Jun.17,2022

because you only passed the subscript index alone, this parameter alone cannot completely distinguish the grid you clicked on. Just pass another parameter

default is the first highlight. If you don't need to delete this | (! item.selected & & index = 0) 

<template v-for="item in guige">
    <div class="chacanshu">
        <p class="canyi">{{item.name}}:

        <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)
}

you use a two-dimensional array here, but you only use a index . You can't tell the difference. If you want to maintain the state of these rows with an array at the same time, a simple way is to add an attribute directly to the original guide array, such as selected , as a tag. Alternatively, you can mark it with another array, such as 

let arr = []

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

then maintain the status of the click by accessing the arr subscript

Previous: Why does the parameter obtained by nginx, a slash with URL format, become a

Next: Why do floats start with sibling elements?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea52e8-1d38.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea52e8-1d38.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?