这个问题随后发布在这里：
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
我将提供Bert Evans答案的略微简化版本（自删除后），其中扩展状态与数据分开跟踪。 我只是使用字典而不是数组来跟踪哪些是打开的id ，因为它更容易检查成员资格和删除。
需要了解更多jQuery教程分享VueJS手风琴表 – 基于实时系统的约束，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
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}} {{row.id}} {{row.name}} afasfafs
Testing: {{testing}}
Expanded: {{expanded}}
Replaced: {{replacedCounter}}
以上就是jQuery教程分享VueJS手风琴表 – 基于实时系统的约束相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/982422.html