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 hidden row. The hidden row contains an accordion.

The problem is that the accordion is getting all messed up and shows at the bottom of the table, rather than showing below the particular row that it was clicked on.

My code is as follows:

<table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="column in columns">
           <span v-if="column == 'Predictive Price'">
                {{column}} 
                <i class="fa fa-info-circle" v-tooltip="msg"></i>
           </span>
           <span v-else-if="column == 'Actual Price'">
                 {{column}}
           <i class="fa fa-info-circle" v-tooltip="tooltip.actual_price"></i>
                              </span>
                              <span v-else>

                                {{column}}
                              </span>
                          </th>
                          <th>Actions</th>
                       </tr>

                   </thead>

                   <tbody>
                      <tr v-for="row in model" @click="showRow">

                          <td>
                              {{row.id}}
                          </td>

                          <td>
                              {{row.company_customer.customer_name}}
                          </td>

                          <td>
                              <i class="fa fa-map-marker"></i>
                              <small>
                                {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
                              </small>
                          </td>

                          <td>
                              <i class="fa fa-map-marker"></i>
                              <small>
                                  {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}}
                              </small>
                          </td>

                          <td>
                                &pound;{{row.predictive_price}}
                          </td>

                          <td>
                                &pound;{{row.actual_price}}
                          </td>

                          <td>
                              n/a
                          </td>

                          <tr>
                            <td colspan="7" v-if="contentVisible">
                                  <div class="accordian-body">
                                      ACCORDION 
                                  </div>
                            </td>
                          </tr>

                      </tr>



                  </tbody>
              </table>


<script>

export default {

    methods: {
        data() {
          return {
            msg: 'This is just an estimation!',

            tooltip: {
                actual_price: 'Click on the price to edit it.'
            },

            contentVisible: false,

          }
      },
      rowRow() {
          this.contentVisible = !this.contentVisible;
      }
    }

}

</script>

Where can I place the accordion div in order for it to display correctly?

EDIT:

Please see fiddle: https://jsfiddle.net/49gptnad/355/

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;

    }

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="vue-instance">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th v-for="column in columns">
          {{column}}
        </th>
      </tr>
    </thead>

    <tbody>
      <template v-for="row in testing">
        <tr @click="row.contentVisible = !row.contentVisible">
           <td>{{row.id}}</td>
           <td>{{row.name}}</td>
         </tr>
         <tr v-if="row.contentVisible">
           <td :colspan="columns.length" >
             <div class="accordian-body">
               afasfafs
             </div>
           </td>
         </tr>
      </template>
    </tbody>
  </table>
</div>

Here is your updated fiddle.