防止從組合方塊中刪除特定晶片
P粉674757114
P粉674757114 2024-02-03 16:42:39
0
1
434

我有這些 combobox 晶片,但有一個問題 deletable-chips

<v-combobox
    v-model="selectedCategories"
    :items="attributeCategories"
    item-text="name"
    item-value="id"
    label="Category"
    multiple
    chips
    clear-icon="mdi-close-circle"
    deletable-chips
    v-on:change="changeCategory(selectedCategories)"
></v-combobox>

有沒有辦法防止特定晶片被刪除?例如,不在特定的按鈕上顯示刪除按鈕?假設對於 Device 且只允許刪除 WeatherGeo Location

P粉674757114
P粉674757114

全部回覆(1)
P粉354948724

而不是使用v-chips內建的刪除方法。您可以透過自訂 @click:close 事件來實現。我為您創建了一個工作演示

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    model: [],
    items: [
      {
        text: 'Weather'
      },
      {
        text: 'Geo Location'
      },
      {
        text: 'Device'
      }
    ]
  }),
  methods: {
    remove (itemText) {
      if (itemText === 'Device') {
        return;
      } else {
        this.model.forEach(obj => {
          if (obj.text === itemText) {
            this.model.splice(this.model.indexOf(obj), 1)
          }
        })
        this.model = [...this.model]
      }
    }
  }
})
sssccc
sssccc


熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板