Vue double v-for data how to click to add active

    <div class="class-list" 
        v-for="(value, key) in list" 
        :key="key">
        <h3>{{value.title}}</h3>
        <span
            class="class-item" 
            :class="{active: index === isActive}"
            v-for="(item,index) in value.items" 
            :key="item"
            @click="handleSortItemClick(index,value)"
        >{{item}}
        </span>
    </div>

the data structure is like this

"list": {

    "trade": {
        "title":"",
        "items":["","","3C","","","/","/","/","","/",""]
    },
    "fn":{
        "title":"",
        "items":["","","","","","","","","","","",""]
    },
    "area":{
        "title":"",
        "items":["","","","","","","","","",""]
    }
}

how to write in the click event how to write three categories to add active, without affecting each other. If you write three loops separately, you can achieve the expected results, but the code is stupid and ask the gods to take a look at it

.
Javascript
Apr.15,2021

I don't know if you want this effect, but you can add an active

to each part of the loop.

you can first combine list into this format
list: [{

] 
    title: '1',
    items: [{
      name: '1',
      active: false
    }, {
      name: '2',
      active: false
    }]
  }, {
    title: '2',
    items: [{
      name: '3',
      active: false
    }, {
      name: '4',
      active: false
    }]
  }]
  
  <div class='class-list' 
    v-for='value in list' 
    :key='value.id'>
    <h3>{{value.title}}</h3>
    <span
        class='class-item' 
        v-for='item in value.items' 
        :class="{'active': item.active}"
        :key='item.id'
        @click='handleSortItemClick(item, value)'
    >{{item.name}}
    </span>
</div>

handleSortItemClick(item, row) {
  row.items.forEach(item => item.active = false)
  item.active = true
}

scss
.class-list {

&:first-child{
    &.active{
        h3{
        }
        span{
        }
    }
}
&:nth-child(2){
    &.active{
        h3{
        }
        span{
        }
    }
    }
&:last-child{
    &.active{
        h3{
        }
        span{
        }
    }
}

}

Previous: Mysql joint sorting of multiple tables

Next: The width of the table,table wrapped by div exceeds the width, and the scroll bar that appears cannot be dragged under windows.

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
© 2021 CodesHelper
Advertising Contact us About us
Menu