如果先前在 vue js html 中选择了这些选项，我该如何避免这些选项？

Question

我获取所有库存的 json 数据是

{
  "status": true,
  "data": [
    { "inv_id": 1, "name": "Arts" },
    { "inv_id": 2, "name": "web" },
    { "inv_id": 3, "name": "mobileapp" },
    { "inv_id": 4, "name": "ws" },
    { "inv_id": 5, "name": "aop" },
    { "inv_id": 6, "name": "bin" },
    { "inv_id": 7, "name": "webs" },
    { "inv_id": 8, "name": "hell" }
  ]
}

用户已经选择的我的json数据将采用以下格式

{
  "data": {
    "pid": 109,
    "contact": {
      "email": "ew98@gmail.com",
      "phone": 85998472,
      "address": { "country": "India", "state": "Kerala" }
    },
    "about": "hello how are you",
    "is_featured": false,
    "avg_rating": 0,
    "total_reviews": 0,
    "reviews": [],
    "inventory": [
      {
        "item": {
          "name": "Arts",
          "category": { "name": "Education", "id": 1 },
          "id": 1
        }
      }
    ],
    "review": null
  },
  "status": true
}

这里的艺术已经被选中，所以我在提供编辑选项时需要避免同样的情况。我怎样才能做到这一点。

mounted() {
  var self = this

  data = {}
  data["auth-token"] = this.authType
  data["pid"] = this.pid

  $.ajax({
    url: "http://127.0.0.1:8000/get/post/",
    data: data,
    type: "POST",
    dataType: "json",
    success: function(e) {
      if (e.status == 1) {
        self.inventory = e.data.inventory

        data = {}
        data["category"] = self.catid
        data["cat_id"] = self.catid

        $.ajax({
          url: "http://127.0.0.1:8000/alpha/get/inventory/",
          data: data,
          type: "POST",
          dataType: "JSON",
          success: function(e) {
            if (e.status == 1) {
              self.inventoryall = e.data
            }
          },
        })
      }
    },
  })
}

我在inventoryall[] 中拥有所有库存以及已添加在inventory[] 中的库存。

我的html代码是

<div class="form-group">
  <label>Inventory
    <small>(required)</small>
  </label>
  <select
    id="basic"
    class="selectpicker"
    data-live-search="true"
    data-live-search-style="begins"
    title="Select Your Subcategory"
    v-model="inv" name="inv[]" multiple required="required"
  >
    <option v-for="sop in inventoryall" v-bind:value="sop.inv_id">{{sop.name}}</option>
  </select>
</div>

所以，当我在这里显示库存时，我需要避免已经选择的那一次。请帮助我找到解决方案。

Answer 1

这里可以使用数组filter方法：

// filter loops through every item in the array and returns a new array
// if the filter function returns true, the item stays in the new array
// if the filter function returns false, the item is removed
self.inventoryall = self.inventoryall.filter(item => {
  // loop through all of the currently selected items
  for (const selectedItem of self.inventory) {
    // if we find a current item with the same ID as the selected one,
    // return false, so we don't keep the item
    if (selectedItem.id === item.inv_id) {
      return false
    }
  }

  // if we never find an item with a matching ID, return true to keep it
  return true
})

请注意，此方法仅在支持 ES6 的浏览器中可用，因此如果您需要支持旧版浏览器，请使用 MDN 页面上的 polyfill。

另一个注意事项，由于您使用的是 Vue，这对于 computed property 来说可能是一个很好的用例。