How to highlight the active (selected) element on VUE?

Question

Vue.js

I have several components.

I need to highlight the active row that was clicked. The difficulty is that only one element can be selected at a time.

<template>
    <div >
        <div class = "main-window"> 
            <ul >    
                <Directoire
                v-bind:directories="directories"
                />
                <span>{{firstWindow[0].dir}}</span> 
                <BackRowVue
                v-if="!(firstWindow[0].dir.length < 4)"
                
                v-bind:whichScreen="whichScreen"

                v-bind:firstWindow="firstWindow"  
                v-bind:secondWindow="secondWindow"

                @newvalue="newvalue"
                />                        
                <Item  class = "modal"        
                v-for="elem of firstWindow"
                v-bind:key="elem"
                v-bind:elem="elem"
                v-bind:whichScreen="whichScreen"
                v-bind:firstWindow="firstWindow"
                v-bind:secondWindow="secondWindow"
                @newvalue="newvalue"
                @selectelem="selectelem"
                />
                <button @click="backToHomeDir(firstWindow[0].dir, whichScreen)"> Back to home </button> 
            </ul>
            <ul > 
                <Directoire
                v-bind:directories="directories"
                /> 
                
                <span>{{secondWindow[0].dir}}</span>
                <BackRowVue
                    v-if="!(secondWindow[0].dir.length < 4)"               
                    v-bind:whichScreen="!whichScreen"

                    v-bind:firstWindow="firstWindow"  
                    v-bind:secondWindow="secondWindow"

                    @newvalue="newvalue"
                /> 
                                 
                <Item class = "modal"
                v-for="elem of secondWindow"
                v-bind:key="elem"
                v-bind:elem="elem"
                v-bind:whichScreen="!whichScreen"
                v-bind:firstWindow="firstWindow"
                v-bind:secondWindow="secondWindow"
                @newvalue="newvalue"
                @selectelem="selectelem"
                /> 
                <button @click="backToHomeDir(firstWindow[0].dir, !whichScreen)"> Back to home </button>   
            </ul>
        </div>
        <div class = "control-button">     
                <button @click="relocate(currentElem, firstWindow, secondWindow)">Перенести</button>
                <button @click="copy(currentElem, firstWindow, secondWindow)">Скопировать</button>
                <button @click="remove(currentElem)">Удалить</button>
        </div>
    </div>
</template>

<script>
import Item from '@/components/itemVue.vue'
import Directoire from '@/components/DirectoriesVue.vue'
import BackRowVue from '@/components/BackRowVue.vue'
// import { json } from 'express'

export default {
    props: ['firstWindow','secondWindow', 'directories', 'firstDir', 'secondDir', 'whichScreen', 'flagForBack','windows'], 
    components:{
        Item,        
        Directoire,
        BackRowVue
    },
    data(){
        return{
            flagForButton:false,
            currentElem:{}
        }
    },
    methods:{
        newvalue(data){                                  
            this.$emit('newvalue', data);
        },
        selectelem(elem){            
            this.currentElem = elem;            
        },
        copy(currentElem, firstWindow, secondWindow){
            console.log("dsadsad");
            console.log(this.currentElem);
            if(this.currentElem.whichScreen){
                currentElem['where'] = secondWindow[0].dir;
            }else{
                currentElem['where'] = firstWindow[0].dir;
            }
            fetch('/copy',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(currentElem)                
                    })
                    .then(response => response.json()) 
                    .then(json =>this.$emit("newvalue", [json.table, !this.currentElem.whichScreen]))       
        },
        relocate(currentElem, firstWindow, secondWindow){
            if(this.currentElem.whichScreen){
                currentElem['where'] = secondWindow[0].dir;
            }else{
                currentElem['where'] = firstWindow[0].dir;
            }
            fetch('/relocate',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(currentElem)                
                    })
                    .then(response => response.json())
                    .then(json =>this.$emit("newvalueforbothwindows", [JSON.parse(json[0]), JSON.parse(json[1])])) // обновляем сразу два окна
        },
        remove(currentElem){            
            fetch('/delete',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(currentElem)                
                    })
                    .then(response => response.json()) 
                    .then(json =>this.$emit("newvalue", [json.table, this.currentElem.whichScreen]))  
        },
        backToHomeDir(dir, whichScreen){
            let sendInfo = {
                dir: dir,
                whichScreen: whichScreen
            };
            
            fetch('/goHome',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(sendInfo)                
                    })
                    .then(response => response.json()) 
                    .then(json =>this.$emit("newvalue", [json.table, this.currentElem.whichScreen]))  
        }
        
        
    },
}
</script>

<template>
    <div class = "row__elements">
       <div @click="clickOnRow(elem, whichScreen)" class = "row__element" v-bind:class = "activeClass">           
           <img class = "file-info icon" :src = "imgSrc.icon"/>           
           <div class = "file-info title"> {{elem.fileName}} </div>
           <div class = "file-info size"> {{elem.sizeOrType}} </div>
           <div class = "file-info date"> {{elem.dateOfChange}} </div>                          
        </div>
          
    </div>
</template>

В этом компоненте мы отрисовываем текущую строку и заносим в нее данные
<script>
export default {
    props:{
        elem:{
            type:Object,
            default: () => ({}),
                        
        },
        whichScreen:{
            type:Boolean,
            // default: false,
        },
    },
    
    data()
        { 
            return{
                delay: 500,
                clicks: 0,
                timer: null,
                activeClass:"",
                obj: this.elem                             
            } 
        },
    methods:{
       clickOnRow: function(elem, whichScreen){
          this.clicks++   
          if(this.clicks === 1) {
            var self = this
            this.timer = setTimeout(function() {            
            console.log("одинарный");                 
              self.clicks = 0
            }, this.delay);
            elem['buttonON'] = true; // нужно ?
            // makeActive();
            console.log(elem.buttonON);
            elem["whichScreen"] = whichScreen;
            this.$emit("selectelem", elem)
          } else{
             clearTimeout(this.timer);
             console.log("двойной");
             elem['whichScreen']  = whichScreen;   
             elem['downOrUp'] = true;
             this.clicks = 0;                
            fetch('/currentDir1',{
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'                 
                    },
                    body: JSON.stringify(elem)                
                    })                    
                    .then(response => response.json()) 
                    .then(json =>this.$emit("newvalue", [json.table, whichScreen]))   
          }        	
        },
        makeActive:function(elem){
            this.activeClass = elem;
        },
        imgSrc: function(){
                       
            return this.obj
        },
        // addDefaultValue: function(elem){
        //     if(elem){
        //         return elem
        //     }else{
        //         return ""
        //     } 
        // }
        
    }, 
}
</script>

Answer 1

In parent:

data: () => ({
  activeElem: null,
  ...
}),

<Item
  :active="activeElem === elem"
  @activate="activeElem = elem"
  ...
/>

In child component:

props: {
  active: Boolean,
  ...
},

this.$emit('activate'); // когда надо сделать текущий элемент активным

<div class="row__elements" :class="{ active }">

Answer 2

@focus