VueJS Accordion Table - Appears outside of the table

Question

I have a table where the data is fetched using ajax. I\'m trying to have a table where each row has an associated hidden row and clicking on the row toggles the display of the h

Answer 1

It sounds like you want an accordion associated with every row, so really, you want two rows for each item of your data.

You can accomplish that by moving your v-for to a template tag that wraps both of your rows.

Additionally, you need to control whether content is visible on a row by row basis, so add a contentVisible property to each data item and use it to control whether your second row is visible or not.

console.clear()

var vm = new Vue({
  el: '#vue-instance',
  data: {
    testing: [{
        id: 1,
        name: "Customer 1",
        contentVisible: false

      },
      {
        id: 2,
        name: "Customer 1",
        contentVisible: false

      },
      {
        id: 3,
        name: "Customer 3",
        contentVisible: false

      },
    ],
    columns: ["id", "name"]
  },

  mounted() {
    console.log(this.testing);
  },

  methods: {
    showRow(data) {
      this.contentVisible = !this.contentVisible;

    }

  }
});

  

    

      

        

          {{column}}
        
      
    

    

      
    
  

Here is your updated fiddle.