vue.js:跟踪当前选中的行

Question

我有一个简单的表格，我想在其中处理点击元素:

<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 因为我可能需要访问当前上下文。

Answer 1

问题是您只有一个变量 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;
        }
    }
});