How to add click events to the elements that come out of vue v-for controls the current element being clicked, but not all of them

The icon "+" appears in

v-for, which one is clicked and which becomes "added", all of which have changed with one click. The
code is as follows:

clipboard.png

clipboard.png

clipboard.png
clipboard.png

Vue.js
Mar.19,2021 
// map
this.coins.map(el => {
   el.isShowTxt = false;
   retrun el;
});
<template>
    <tr v-for="(coin, index) in coins">
        <td>
            <i @click="add"></i>
            <span v-show="coin.isShowTxt"></span>
        </td>
    </tr>
</template>
<script>
export default {
    methods: {    
        add(index){
            this.coins[index].isShowTxt = true;
        }
    }
};
</script>

I hope I can help you ~ it is recommended to post a code instead of a picture next time.

isshoutex do arrays, isshoutex= [false,false,false]

both isShowIcon and isShowTxt use arrays, with isShowIcon [coin.id] as the subscript or index as the following table in recycling. Click the function add to pass an argument, coin.id or index. Then the function body implements isShowIcon [coin.id] = false.

the problem is that the v-show condition of all your I tags is the same data. It must have all changed as soon as it changed.

set your own isShowIcon and isShowTxt, for each coin so that changing your values will not affect others. Do not share isShowIcon and isShowTxt, or else you will click once and everything else will change

can be written when v-for (coin,index) of coins, passes the index when calling the add method and gets all the + signs in the add method. Then change the one at index to have been added

Previous: How vue uploads multiple files at a time instead of uploading them one by one

Next: When you use axios to call the background interface, baseurl itself becomes localhost,. How to change it?

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