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"},
                    ]
                },
            ]
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

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-1b40451-2c503.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-1b40451-2c503.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?