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) 
    } 
    }, 
}, 
...