VueJS Accordion Table — Constraints for real time

Question

This question follows on from posted here:

VueJS Accordion Table - Appears outside of the table

The answer provided by @Bert Evans is good, however, in the system that I'm developing, there are some constraints which is not making it work.

The main constraint is the fact that I'm developing a real-time based system, which takes advantage of the store so when something is edited by a user, then the an action is triggered which pulls all the data again from an ajax call. The solution provided uses contentVisible and although I can map this when the action is called, the main problem is that whenever the action is called, the contentVisible is being set to false by default causing the accordion to close.

I have tried to create a copy of the data, however, this is not sufficient enough. Basically, I need a way to detect that someone has clicked on a particular row and then show the accordion below it.

Any suggestions?

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>

Answer 1

I'll offer a slightly simplified version of Bert Evans' answer (since deleted), in which expanded state is tracked separately from the data. I just used a dictionary instead of an array to track the ids of which ones are open, because it's easier to check for membership and delete.

console.clear()

const testing = [{
    id: 1,
    name: "Customer 1",
  },
  {
    id: 2,
    name: "Customer 2",
  },
  {
    id: 3,
    name: "Customer 3",
  },
]

var vm = new Vue({
  el: '#vue-instance',
  data: {
    testing,
    expanded: {},
    columns: ["id", "name"],
    replacedCounter: 0
  },
  mounted() {
    setInterval(() => {
      this.testing = testing
      this.replacedCounter++
    }, 3000)
  },
  methods: {
    expand(id) {
      if (id in this.expanded)
        this.$delete(this.expanded, id);
      else
        this.$set(this.expanded, id, true);
    }
  }
});

<script src="https://unpkg.com/vue@2.2.6/dist/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 combined">
        <tr @click="expand(row.id)">
           <td>{{row.id}}</td>
           <td>{{row.name}}</td>
         </tr>
         <tr v-if="row.id in expanded">
           <td :colspan="columns.length" >
             <div class="accordian-body">
               afasfafs
             </div>
           </td>
         </tr>
      </template>
    </tbody>
  </table>
  Testing: {{testing}} <br /> Expanded: {{expanded}} <br /> Replaced: {{replacedCounter}}
</div>