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

单击并选择某行时,我的问题是取消选中所有其他行.

此外,我有兴趣知道,它可以访问scannervia回调函数的一些变量而不是使用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;
        }
    }
});