VueJS手风琴表 - 基于实时系统的约束 [英] VueJS Accordion Table -- Constraints for real time based system
问题描述
此问题从此处发布：
@Bert Evans提供的答案很好，但是，在我正在开发的系统中，存在一些不能使其工作的约束。
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.
主要的限制是我正在开发一个基于实时的系统，它利用商店所以当用户编辑某些内容时，会触发一个动作，从ajax调用中再次提取所有数据。提供的解决方案使用 contentVisible ，虽然我可以在调用操作时映射它，主要问题是每当调用操作时， contentVisible 默认设置为 false ，导致手风琴关闭。
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.
有什么建议吗？
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>
推荐答案
我将提供一个稍微简化的Bert Evans答案（自删除后），其中扩展状态与数据分开跟踪。我只是使用字典而不是数组来跟踪 id 的哪些是打开的，因为它更容易检查成员身份和删除。
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>
这篇关于VueJS手风琴表 - 基于实时系统的约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
