Question

我有一个输入，可以接受条形码扫描仪输入，并将所有值放入数据数组中。这是完美的工作。然后，我想逐行显示此数据，但以相反的顺序显示，因此最近扫描的项目位于顶部。我是通过以下方式实现的：

data: {
    barcodes: [1, 2, 3, 4, 5, 6, 7, 8]
},

methods: {
    deleteBarcode(index) {
        this.barcodes.splice(index, 1); 
    }
},    

computed: {
    reversedOrderBarcodes() {
        return this.barcodes.slice().reverse();
  }
},

在视图中，我这样做：

<div class="col-md-12" id="items" v-for="(barcode, index) in reversedOrderBarcodes">
    <div class="row">
        <div class="col-md-6" style="padding-top:7px;">
            <barcode :value="barcode | capitalize" format="code128" height="25" margin="0" width="1" font-size="12" text-margin="0">
            </barcode>
            <a href="#" @click.prevent="deleteBarcode(index)" style="position:absolute;right:0px;top:10px;">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </a>
        </div>
    </div>
</div>

条形码在视图中正确显示。它们的顺序为8, 7, 6, 5, 4, 3, 2, 1。问题是，为了使我能够反应性地删除项目，必须从data而不是计算数组中删除它。缺点是计算数组中的键由于被反转而与原始数据数组不匹配，因此在这种情况下，单击视图行上的8删除将删除data数组索引{{1 }}，其中的条形码为0。

我一直在寻找一种通过条形码本身删除的方法。有谁知道我可以反向显示计算后的数组，但仍然允许自己从主反应数据数组中删除它？

Answer 1

您可以传递条形码以删除功能，然后在this.barcodes数组中搜索匹配的条形码：

<div class="col-md-12" id="items" v-for="(barcode, index) in reversedOrderBarcodes">
    <div class="row">
        <div class="col-md-6" style="padding-top:7px;">
            <barcode :value="barcode | capitalize" format="code128" height="25" margin="0" width="1" font-size="12" text-margin="0">
            </barcode>
            <a href="#" @click.prevent="deleteBarcode(barcode)" style="position:absolute;right:0px;top:10px;">
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </a>
        </div>
    </div>
</div>

和

methods: {
    deleteBarcode(barCode) {
       const barCodeIndex = this.barcodes.findIndex(code => code === barCode)
       if (barCodeIndex >= 0) {
         this.barcodes.splice(barCodeIndex, 1)
       }
    }
}

Answer 2

这不像数学上的那么vue或js任务：

deleteBarcode(index) {
    this.barcodes.splice(this.barcodes.length - 1 - index, 1);
}

vuejs v2-计算反向后从数组中删除项目

2 个答案: