Fields in the external data cannot be called in the vue v-for loop

TA card, the layout of circular output is the same, only a few words vary according to the TAB card clicked

my judgment is based on the current ID value of the tab card, which cannot be obtained if it is put into the loop body. When
is put on the outside, two loops are about to be written?
because the fields returned by the backend are all the same, but the text and values in the loop in the click purchase are different 

        <div class="demo-tab">
            <ul>
                <li @click="e=>this.current_tab=0" 
                    :class="{"active":this.current_tab===0}">
                    <b></b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=1" 
                    :class="{"active":this.current_tab===1} ">
                    <b></b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=2"
                    :class="{"active":this.current_tab===2}">
                    <b></b>
                    <em></em>
                </li>
            </ul>
        </div>
        
        <div class="demo-cont">
            <div class="" v-for="(item,index) in data" :key="index">
                
            </div>
        </div>
Vue.js javascript
Apr.11,2021

Please give some clear descriptions of the problem

using the calculation attributes. In the method of calculating the properties, you can first fill in the required values into each object in the array according to id

.

can be made into a widget, and then pass the prop, of isSecond to determine whether it is a second loop
or you can also use a slot to define the name

. 
    <div class="demo-cont">
        <ul v-for="(item,index) in data" :key="index">
            <li :class="{'active':current_tab === index}"
            @click="current_tab = index" >
                <span v-if="index === 0">{{ isSecond ? '' : item.name}}</span>
                <span v-else>{{ item.name }}</span>
            </li>
        </ul>
    </div>

I don't know if I understand this meaning

Previous: Openssl disables tls1.0

Next: Composer pack a bag, report this mistake, how to do?

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