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

Answer 2

我是你想要的印象能够选择多行。所以这是一个答案。

this.isSelected这里并不仅限于一个scanner。它绑定到你的整个Vue实例。

如果你想让每个扫描器都是自己的组件，那么你的代码就可以工作了。

Vue.component('scanner', { 
    template: '<div class="{ selected: isSelected }" @click="toggle">...</div>', 
    data: function() { 
    return { 
     isSelected: false, 
    } 
    }, 
    methods: { 
    toggle() { 
     this.isSelected = !this.isSelected 
    }, 
    }, 
}) 

// Your Code without the scannerFilter method... 

然后，你可以这样做：

<scanner v-for="scanner in scanners"></scanner> 

如果你想保持它到一个虚拟机，你可以保持选定的扫描仪在阵列和切换基于类别中，如果该元素是在数组或不，你可以添加这样的东西到你的Vue实例。

<div 
    :class="['row', { selected: selectedScanners.indexOf(scanner) !== 1 }]" 
    v-for="scanner in scanners" 
    @click="toggle(scanner)"> 
    ... 
</div> 

... 
data: { 
    return { 
    selectedScanners: [], 
    ... 
    } 
}, 
methods: { 
    toggle (scanner) { 
    var scannerIndex = selectedScanners.indexOf(scanner); 
    if (scannerIndex !== -1) { 
     selectedScanners.splice(scannerIndex, 1) 
    } else { 
     selectedScanners.push(scanner) 
    } 
    }, 
}, 
...