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

Question

以下是在这里张贴的问题：

VueJS Accordion Table - Appears outside of the table

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

主要的限制因素是，我正在开发一个基于实时的系统，它利用了store，所以当用户编辑某件事情时，就会触发一个动作，它再次从ajax调用中提取所有数据。所提供的解决方案使用contentVisible，尽管我可以在调用操作时映射该操作，但主要问题是每当调用该操作时，默认情况下将 false 设置为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答案的一个稍微简化的版本(自删除后)，在该版本中，扩展状态将与数据分开跟踪。我只是使用字典而不是数组来跟踪哪些id是打开的，因为它更容易检查成员资格和删除。

​

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>

​