Блог

Главная - Вопросы по программированию - Vue b-форма-тег удалить/скрыть кнопку добавления

Vue b-форма-тег удалить/скрыть кнопку добавления

#javascript #vue.js #bootstrap-vue

Вопрос:

Я новичок в vue, и некоторые вещи для меня совершенно новые. Я уже пытался найти решение в Google, но до сих пор ничего не нашел.

Я надеюсь, что кто-нибудь сможет мне помочь или сказать, возможно ли то, что я пытаюсь, или нет.

У меня есть один тег b-формы, получающий данные из коллекции firestore.

В этом конкретном теге b-формы мне нужны только теги «удалить/удалить».

введите описание изображения здесь

Я не хочу разрешать новые теги: введите описание изображения здесь

Скрипка b-форма-тег не позволяет создавать новые 

 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>

Ответ №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>

Комментарии:

1. Привет, спасибо за предложение. Я начал использовать «ограничение» как валидатор. В основном при удалении одного тега я обновляю ограничение на длину массива.

2. Добро пожаловать, ура 🙂

Метки: