Mam prosty stół, w którym chciałbym obsługiwać elementy:

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

Mój problem jest niezmiertelny wszystkie inne wiersze, gdy kliknął i wybrany jest jakiś wiersz.

Byłbym również zainteresowany, aby dowiedzieć się, że jest to możliwe, aby uzyskać dostęp do scanner poprzez jakąś zmienną funkcji wywołania zwrotnego zamiast przy użyciu this, ponieważ może być konieczne dostęp do bieżącego kontekstu.

1
Vojtěch 16 luty 2017, 16:46

2 odpowiedzi

Najlepsza odpowiedź

Problem polega na tym, że masz tylko jedną zmienną isSelected, używając której chcesz kontrolować wszystkie wiersze. Lepsze podejście będzie miało zmienną: selectedScanner i ustaw go do wybranego skanera i użyj tego w v-bind:class w ten sposób:

<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;
        }
    }
});
7
Saurabh 16 luty 2017, 14:01

Byłem pod wrażeniem, którego chciałeś być w stanie wybrać wiele wierszy. Oto odpowiedź na to.

this.isSelected nie jest przywiązany do jednego {x1}} tutaj. Jest przywiązany do całej instancji VUE.

Gdybyś miał dokonać każdego skanera, jest własny komponent, Twój kod mógłby bardzo pracować.

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

Następnie możesz:

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

Jeśli chciałbyś zachować go do jednego VM, możesz zachować wybrane skanery w tablicy i przełączanie klasy na podstawie, jeśli ten element znajduje się w tablicy lub nie można dodać czegoś takiego do instancji 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)
    }
  },
},
...
3
Bill Criswell 16 luty 2017, 14:19