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

Posted 2023-02-22

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

【英文标题】：How can I avoid options if those options are previously selected in vue js html?

【发布时间】：2018-07-28 01:02:54

【问题描述】：

我获取所有库存的 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": "[e-mail]",
      "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>

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

【参考方案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 来说可能是一个很好的用例。

【讨论】：

如何在选项的html端显示它

您现在已经在这样做了。如果你更新 inventoryall 数组（例如在你的第二个 ajax 调用的成功回调中）Vue 应该自动更新 HTML

先生，什么都没有发生

先生，它是 selectedItem.id .. 感谢先生的帮助