In the vue-cli project, a tab, generated from a data loop clicks on any one of them, triggers the same event, and switches the corresponding data?

in vue-cli projects, the given ID is not recognized by DOM, due to poor operation.
so it is stuck here. The current code is as follows:

. The

tab option is generated from the data v-for loop, and the CSS3 I use defaults to the first of these styles with a background. The first set of data is also requested by default, which is shown below. Now the requirement is, click on any one of them, the corresponding tab style will be added, the previous style will be removed, and the data displayed will correspond to the corresponding tab, code of course. I intend to write it in methods. How to implement it? I can"t operate DOM,. A lot of things really hurt.

Vue-cli vue.js
Mar.10,2021

the subject still does not understand the essence of data-driven
first of all v-for every subitem that comes out needs a key to ensure the correct rendering

. 
<span v-for="(item, index) in productTabs" :key="index">{{ item }}</span>

then if you want to implement the corresponding tab activation, you can initialize a variable active to save the state 

<span>
    v-for="(item, index) in productTabs"
    :class="active === item ? 'active-class' : ''"
    :key="index"
    @click="activeTab(item)">
    {{ item }}
</span>

activeTab(item) {
    this.active = item
}

the above is just a solution, for reference only. When you get used to the data-driven mode, you will no longer think about the DOM operation

. 

<span v-for="" @click="handleTabClick(item)">{{item}}</span>


methods: {
    handleTabClick(item){
        //
    }
}

Previous: Does Qiniu SDK not support iCloud to upload pictures?

Next: Android phone video top level, search unsolved, ask for help!

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