VueJS 手风琴表——基于实时系统的约束

Question

这个问题是从这里发布的：

VueJS Accordion Table - Appears outside of the table

@Bert Evans 提供的答案很好，但是，在我正在开发的系统中，有一些限制使其无法正常工作。

主要的限制是我正在开发一个基于实时的系统，它利用了store，所以当用户编辑某些内容时，会触发一个动作，再次提取所有数据来自 ajax 调用。提供的解决方案使用contentVisible，虽然我可以在调用动作时映射它，主要问题是每当调用动作时，contentVisible 默认设置为false，导致手风琴关闭。

我已尝试创建数据的副本，但这还不够。基本上，我需要一种方法来检测有人单击了特定行，然后在其下方显示手风琴。

有什么建议吗？

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

我将提供 Bert Evans 答案的略微简化版本（已删除），其中扩展状态与数据分开跟踪。我只是使用字典而不是数组来跟踪打开的ids，因为它更容易检查成员资格和删除。

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>