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>

如果您想将它保留在一个VM中，您可以将选定的扫描仪保留在一个数组中，并根据该元素是否在数组中来切换类，您可以向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)
    }
  },
},
...

vue.js：跟踪当前选定的行

2 个答案: