我有一个简单的表格,我想在其中处理点击元素:
<div class="row"
v-bind:class="{selected: isSelected}"
v-for="scanner in scanners"
v-on:click="scannerFilter">
{{scanner.id}} ...
</div>
JS:
new Vue({
el: "#checkInScannersHolder",
data: {
scanners: [],
loading: true
},
methods: {
scannerFilter: function(event) {
// isSelected for current row
this.isSelected = true;
// unselecting all other rows?
}
}
});
我的问题是在单击并选择某行时取消选择所有其他行。
此外,我很想知道,是否可以通过回调函数的某个变量访问 scanner
而不是使用 this
因为我可能需要访问当前上下文。
最佳答案
问题是您只有一个变量 isSelected
,您希望使用它来控制所有行。更好的方法是使用变量:selectedScanner
,并将其设置为选定的扫描仪并在 v-bind:class
中使用它,如下所示:
<div class="row"
v-bind:class="{selected: selectedScanner === scanner}"
v-for="scanner in scanners"
v-on:click="scannerFilter(scanner)">
{{scanner.id}} ...
</div>
JS
new Vue({
el: "#checkInScannersHolder",
data: {
scanners: [],
selectedScanner: null,
loading: true
},
methods: {
scannerFilter: function(scanner) {
this.selectedScanner = scanner;
}
}
});
关于vue.js:跟踪当前选中的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42275740/