javascript - Vue b-form-tag 删除/隐藏添加按钮
问题描述
我是 vue 的新手,有些东西对我来说是全新的。我已经尝试用谷歌搜索它的解决方案,但直到现在,什么都没有。
我希望有人可以帮助我或告诉我是否可能,我正在尝试什么。
我有一个 b-form-tag 接收来自 firestore 集合的数据。
在这个特定的 b-form-tag 上,我只想要“删除/删除”标签。
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>
解决方案
您可以添加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>
推荐阅读
- object - Redux reducer - 对象解构不起作用
- google-sheets - 将具有多行值的列标准化为每个单元格的单个值
- asp.net - 如何处理用户控件中的页面事件?
- c# - C# - 当我调用 System.Diagnostics.Process.Start 时,新进程自动将被杀死
- javascript - 通过保留具有匹配键的对象以及相邻对象来过滤对象数组
- node.js - gundb.once 的回调调用错误消息:错误:尚未收到 ACK
- python-3.x - 如何一起使用枚举和切片
- java - 我如何处理 struts 2 中未映射的操作以重定向到一些合适的错误页面?
- python - 角色/库存/设备数据库结构 - Django/SQLite
- c# - 使用 Firebase 通过 C# 向 Android 发送推送并获得响应