过滤计算属性答案

【问题标题】：Filtering Computed Properties过滤计算属性
【发布时间】：2019-08-02 11:26:08
【问题描述】：

我正在制作一份清单。您可以在其中添加和删除元素，并指定每个添加元素的计数。

我在我的数据中包含了所有元素示例：

[
  {
    "rowID": "21",
    "rowAnzahl": 1,
    "elementID": "127",
    "elementName": "Element 4"
  },
  {
    "rowID": "22",
    "rowAnzahl": 1,
    "elementID": "109",
    "elementName": "Element 3"
  },
  {
    "rowID": "",
    "rowAnzahl": "",
    "elementID": "106",
    "elementName": "Element 1"
  },
  {
    "rowID": "",
    "rowAnzahl": "",
    "elementID": "112",
    "elementName": "Element 2"
  }
]

然后我添加了两个计算属性：

elements: function() {
      return this.testData.filter(function(e) {
        return e.rowID
      })
    },
    unusedElements: function() {
      return this.testData.filter(function(e) {
        return !e.rowID
      })
    },

那么我有这些方法：

methods: {
    addElement: function(index) {
      var item = this.testData[index];
      item.rowID = 'new' + this.rowCount++;
      item.rowAnzahl = 1;
    },
    removeElement: function(index) {
      var item = this.testData[index];
      item.rowID = '';
      item.rowAnzahl = '';
    }
  },

但现在我的问题：

我的属性未使用元素和元素的索引从 0 开始...... 但是因为我需要索引号来添加或删除元素，所以这不起作用。是否可以通过我的 elementID 过滤方法？或者我可以将 elementID 设置为索引号吗？

谢谢！

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您可以使用数组的 findIndex 函数搜索索引：

var elements = [...]; // Your list
function indexOfElement(elementID) {
    return elements.findIndex((entry) => entry.elementID == elementID);
}

编辑：也许我没有正确理解您的问题。无论如何我都会把它留在这里

【讨论】：

这行得通，我的新方法是： indexOfElement: function(elementID) { var indexNum = this.testData.findIndex((row) => row.elementID == elementID); var item = this.testData[indexNum];返回 item.rowID = 'new' + this.rowCount++;返回 item.rowAnzahl = 1; } 但感觉这不是最好的方法……

【解决方案2】：

现在，我找到了解决方案。我更改了我的方法并将其连接到我的计算属性而不是我的数据。

    methods: {
    addElement: function(index) {
      var item = this.unusedElements[index];
      item.rowID = 'new' + this.rowCount++;
      item.rowAnzahl = 1;
    },
    removeElement: function(index) {
      var item = this.elements[index];
      item.rowID = '';
      item.rowAnzahl = '';
    }
  },

现在简单的索引解决方案可以正常工作。有时它的帮助只是想有点不同;D

【讨论】：