How to add events and styles to some elements in the vue v-for loop

It's easy to add events and styles to a cyclic element in vue. Here's how to add events and styles to a cyclic element separately.

demo.vue:

<template>
    <table>
       <tr >
          <th v-for = "head in muta">{{head}}</th>   //Cyclic generation of table headers
       </tr>
       <tr v-for = "(item,index) in version" :key = "index" >     //Cyclic generation of data per row
          <td v-for = "(child,index2) in item" :key = "index2" @click = "run(index2)" :class = "index2 == 'num'||index2 =='gu' ? 'underl' : ''">{{child}}</td>                                 //Cyclic generation of data for each cell
       </tr>
    </table>
</template>

<script>
  export default {
    name: "demo",
    data() {
      return {
        muta:[
          'Solution Version',
          'BOM Detailed list',
          'Schematic diagram',
          'Version requirements',
          'firmware',
          'Add time',
        ],
        version:[
           {
              num: '1.10.0',
              bom: 'ooo.xlsx',
              reason: 'oooo.doc',
              need:'2222.doc',
              gu:'1.2.01',
              time:'2018-06-14 12:12:12',
          },
          {
            num: '1.22.0',
            bom: 'ooo.xlsx',
            reason: 'oooo.doc',
            need:'2222.doc',
            gu:'1.2.01',
            time:'2018-06-14 12:12:12',
          },
        ],
       }
      },
    methods:{
      run(index2){
        this[index2]()
      },
      num(){
        console.log('num')
      },
      gu(){
        console.log('gu')
      },
    },
  }
</script>

As you can see from the code, if you want to add style and events to the cells generated by the loop separately, you need to use the unique identity certificate of each cell, key (index 2). First, you define events for the whole cell, then you pass in the key value. Clicking on the event function will execute the corresponding function named after the key value.

Tags: Vue

Posted on Wed, 09 Oct 2019 05:48:32 -0700 by Kisses