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

这个问题随后发布在这里：

VueJS手风琴表 – 出现在表格之外

@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; } } }); 

  
 
 
 
 
 {{column}} 
 
 
 
  
 
{{row.id}}
 
{{row.name}}
 
 
 
 
 afasfafs 
 
 
  
 
  

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); } } }); 

  
 
 
 
 
 {{column}} 
 
 
 
  
 
 Testing: {{testing}} 
 Expanded: {{expanded}} 
 Replaced: {{replacedCounter}}