如何隐藏/移除BootstrapVue中b-form-tag的添加按钮，仅允许删除标签

该需求完全可以实现，直接使用BootstrapVue原生提供的属性配置即可，无需额外自定义逻辑：

核心配置属性 #

• 添加no-add-on-enter属性：禁用回车键触发新增标签的逻辑
• 添加disableAddButton属性：隐藏组件自带的新增按钮，避免用户点击新增
• 若不需要用户看到输入框，也可直接隐藏输入区域，仅保留已生成的标签展示和删除功能

完整示例代码 #

JS 逻辑 #

new Vue({
  el: '#app',
  data: {
    // 此处可替换为从Firestore集合查询返回的标签数组
    tagsCotasJaPagas : ['2016', '2017']
  },
  methods: {
    changeTagTest() {
      // 标签变化（删除）时的回调，可以在这里写同步数据到Firestore的逻辑
    }
  }
})

HTML 模板 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <b-form-tags 
    input-id="tags-basic" 
    v-model="tagsCotasJaPagas"
    placeholder=""
    @input="changeTagTest()"
    inputType="number"
    no-add-on-enter
    disableAddButton
  >
  </b-form-tags>
</div>

补充说明 #

• 如果需要完全禁止用户在输入框输入内容，还可以通过input-attrs属性给内置输入框设置只读属性：

<b-form-tags 
  <!-- 其他属性保持不变 -->
  :input-attrs="{ readonly: true }"
>
</b-form-tags>

• 不要给组件加disabled属性，该属性会同时禁用标签的删除功能，不符合仅允许删除的需求。
• 标签删除后v-model绑定的数组会自动更新，你只需要在input事件的回调方法中处理数组和Firestore的同步逻辑即可。

内容的提问来源于stack exchange，提问作者bruno rafael