Vue b-form-tag remove/hide 添加按钮

Question

我是 vue 的新手，有些东西对我来说是全新的。我已经尝试 google 它作为解决方案，但直到现在，什么都没有。

我希望有人能帮助我或告诉我我正在尝试的是否可行。

我有一个 b-form-tag 从 firestore 集合接收数据。

在这个特定的 b-form-tag 上，我只想要“delete/remove”标签。

我不想允许新标签：

new Vue({
  el: '#app',
  data: {
    
    tagsCotasJaPagas : ['2016', '2017'],
    cotaJaPagasDisable : true,
    
    
    tagsCotasAbertas : ['2018', '2019', '2020']
    
    
    
  },
})

<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"
               :disabled="cotaJaPagasDisable"
               placeholder=""
               @input="changeTagTest()"
               inputType="number"

               no-add-on-enter
               disableAddButton
               >
  </b-form-tags>
  <b-form-checkbox switch size="lg" v-model="cotaJaPagasDisable">
    <span v-if="cotaJaPagasDisable">Unlock</span>
    <span v-else>Lock</span>

  </b-form-checkbox>
  
   
  
  
</div>

Answer 1

您可以将input-id="tags-limit"添加到b-form-tags，然后设置limit：

<b-form-tags 
           input-id="tags-limit" 
           v-model="tagsCotasJaPagas"
           :disabled="cotaJaPagasDisable"
           placeholder=""
           @input="changeTagTest()"
           inputType="number"
           :limit="limit"
           limit-tags-text="Limit reached"
           remove-on-delete
           >

Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
  el: '#app',
  data: {
    tagsCotasJaPagas : ['2016', '2017'],
    cotaJaPagasDisable : true,
    limit: 2,
    tagsCotasAbertas : ['2018', '2019', '2020']
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" integrity="sha512-YnP4Ql71idaMB+/ZG38+1adSSQotdqvixQ+dQg8x/IFA4heIj6i0BC31W5T5QUdK1Uuwa01YdqdcT42q+RldAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js" integrity="sha512-Z0dNfC81uEXC2iTTXtE0rM18I3ATkwn1m8Lxe0onw/uPEEkCmVZd+H8GTeYGkAZv50yvoSR5N3hoy/Do2hNSkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <b-form-tags 
               input-id="tags-limit" 
               v-model="tagsCotasJaPagas"
               :disabled="cotaJaPagasDisable"
               placeholder=""
               @input="changeTagTest()"
               inputType="number"
               :limit="limit"
               limit-tags-text="Limit reached"
               remove-on-delete
               >
  </b-form-tags>
  <b-form-checkbox switch size="lg" v-model="cotaJaPagasDisable">
    <span v-if="cotaJaPagasDisable">Unlock</span>
    <span v-else>Lock</span>
  </b-form-checkbox>
</div>

Vue b-form-tag remove/hide 添加按钮

Vue b-form-tag remove/hide add button

javascript

vue.js

bootstrap-vue