Vue b-form-tag remove/hide add button-CodePudding

I'm new on vue and some of the stuff are totally new for me. I already try google it for a solution, but until now, nothing.

I hope someone can help me or tell me if its possible or not what I'm trying.

I have one b-form-tag receiving data from firestore collection.

On this particular b-form-tag I only want "delete/remove" tags.

I don't want to allow new tags:

Fiddle b-form-tag not allow new

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>

CodePudding user response：

You can add input-id="tags-limit" to b-form-tags and then set 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>