0
194
ViewsVue b-form-tag quitar/ocultar botón agregar
Soy nuevo en vue y algunas de las cosas son totalmente nuevas para mí. Ya intenté buscar en Google una solución, pero hasta ahora, nada.
Espero que alguien pueda ayudarme o decirme si es posible o no lo que estoy intentando.
Tengo una etiqueta de formulario b que recibe datos de la colección firestore.
En esta etiqueta de formulario b en particular, solo quiero etiquetas "eliminar/eliminar".
No quiero permitir nuevas etiquetas: 
Fiddle b-form-tag no permite nuevos
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
Puede agregar input-id="tags-limit" a b-form-tags y luego establecer el 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