如何將新屬性添加到數組的每個 object

Question

如何在對象數組中添加新的 2 個屬性？ 應該為陣列內的每個 object 添加這 2 個屬性。 這是 function：

selectTag(selectedProduct, selectedTag) {
      this.selectedProducts.filter(item => {
        item.id === selectedProduct.id
      })
      .map(item => {
        item.tagId=selectedTag.id, item.tagTitle = selectedTag.title
        })
    },

落下

  <b-dropdown aria-role="list">
                <b-button
                  icon-right="caret-down"
                  class="ToolbarButton"
                  size="is-small"
                >
                  <span> {{ selectedProduct.tagTitle }} </span>
                </b-button>

                <b-dropdownitem
                  v-for="selectedTag in selectedProduct.tags"
                  :key="selectedTag.id"
                  aria-role="listitem"
                  @click="selectTag(selectedProduct, selectedTag)"
                >
                  {{ selectedTag.title }}
                </b-dropdownItem>

我在 function 上面試過，但沒有用。 map 方法應該是固定的。 我正在嘗試添加 tagId 和 tagTitle 屬性，這些屬性將從每個產品行的下拉選擇中獲取值...如何修復？

Answer 1

map function 確實是錯的，你什么都不回，應該是這樣的：

.map(item => ({
     ...item,
     tagId: selectedTag.id,
     tagTitle: selectedTag.title
}))

或者

.map(item => {
  return {
    ...item,
    tagId: selectedTag.id,
    tagTitle: selectedTag.title
  }
})

Answer 2

您可以在 object 上循環並添加您的屬性：

for(let obj of array) {
    obj[key1] = value1;
    obj[key2] = value2;
}

Answer 3

使用.map和 object 擴展語法。

.map(item => ({
    ...item, 
    item.tagId: selectedTag.id, item.tagTitle: selectedTag.title
}))

Answer 4

嘗試這個

 var arr =[ {id: 1, turnName: "10_00_am"}, {id: 2, turnName: "10_00_am"}, {id: 3, turnName: "11_00_am"} ]; const addProps = (x) => { x.prop1 = 'Alaska'; x.prop2 = 'Canada'; return x; } var newArr = arr.map(x => addProps(x)); console.log(newArr);

Answer 5

您可以使用 ES6 object 擴展語法從 map function 返回一個新的更新項。 此外，object 屬性可以在 function 參數本身中進行解構，使其看起來簡潔明了。

selectTag(({id}), ({id: tagId, title: tagTitle})) {
    this.selectedProducts.filter(item => item.id === id)
    .map(item => ({...item, tagId, tagTitle}))
}

Answer 6

從您展示的 function 中，指出過濾器需要將其結果存儲在某個變量中，因為過濾器不會改變執行它的數組。 映射不起作用，因為您必須復制 object 然后擴展新屬性

如果我正確理解了您的問題，請嘗試以下示例

const object = {
  selectTag(selectedProduct, selectedTag) {
    const data = this.selectedProducts.filter((item) => {
      item.id === selectedProduct.id;
    });

    return data.map((entry) => ({
      ...entry,
      tagId: selectedTag.id,
      tagTitle: selectedTag.title,
    }));
  },
};

Answer 7

如果這是在 Vue.js 中，則不能按慣例將屬性添加到 object，因為它不會反應。 你需要使用 Vue.set：

    selectTag: function(selectedProduct, selectedTag) {
      for (var i = 0; i < this.selectedProducts.length; i++) {
        if (this.selectedProducts[i].id === selectedProduct.id) {
          this.$set(this.selectedProducts[i], "tagId", selectedTag.id);
          this.$set(this.selectedProducts[i], "tagTitle", selectedTag.title);
        }
      }
    }