0
203
ViewsVue b-form-tag remove/hide add button
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>
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question