vue.js: Tracking aktuell ausgewählte Zeile

Question

Ich habe eine einfache Tabelle, wo Ich mag würde auf Elemente zu handhaben:

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

Mein Problem ist das Entfernen des Hakens alle anderen Zeilen, wenn einige Zeile wird angeklickt und ausgewählt.

Auch wäre ich interessiert zu wissen, es ist möglich, Zugriff auf die scanner über eine Variable der Callback-Funktion anstelle von this, wie ich möglicherweise auf den aktuellen Kontext zugreifen müssen.

Answer 1

Das Problem ist, Sie haben nur eine Variable isSelected, mit der Sie alle Zeilen steuern möchten. ein besserer Ansatz wird variabel haben: selectedScanner, und an ausgewählten Scanner eingestellt und dies wie dies in v-bind:class verwenden:

<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

Ich hatte den Eindruck, man wollte in der Lage sein, mehrere Zeilen auszuwählen. Also hier ist eine Antwort dafür.

this.isSelected ist hier nicht an eine einzige scanner gebunden. Es ist an Ihre gesamte Vue-Instanz gebunden.

Wenn Sie jeden Scanner zu einer eigenen Komponente machen, könnte Ihr Code ziemlich gut funktionieren. Dann

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... 

, können Sie tun:

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

Wenn Sie es auf eine einzelne VM halten wollten Sie die ausgewählten Scanner in einem Array zu halten und drücken Sie dann die Klasse basierend auf, wenn dieses Element in ist Das Array oder nicht können Sie so etwas zu Ihrer Vue-Instanz hinzufügen.

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