javascript - 在 bootstrap vue 中使用表单标签组件时如何使用对象作为标签
问题描述
为了解释这个问题,请使用以下文档中的代码:
<template>
<div>
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
<b-input-group aria-controls="my-custom-tags-list">
<input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"
class="form-control">
<b-input-group-append>
<b-button @click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group>
<ul
id="my-custom-tags-list"
class="list-unstyled d-inline-flex flex-wrap mb-0"
aria-live="polite"
aria-atomic="false"
aria-relevant="additions removals"
>
<!-- Always use the tag value as the :key, not the index! -->
<!-- Otherwise screen readers will not read the tag
additions and removals correctly -->
<b-card
v-for="tag in tags"
:key="tag"
:id="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
tag="li"
class="mt-1 mr-1"
body-class="py-1 pr-2 text-nowrap"
>
<strong>{{ tag }}</strong>
<b-button
@click="removeTag(tag)"
variant="link"
size="sm"
:aria-controls="`my-custom-tags-tag_${tag.replace(/\s/g, '_')}_`"
>remove</b-button>
</b-card>
</ul>
</template>
</b-form-tags>
</div>
</template>
<script>
export default {
data() {
return {
value: ['apple', 'orange', 'banana', 'pear', 'peach']
}
}
}
</script>
但是,当我将值作为对象数组而不是短字符串时,如何将对象的属性呈现为标记元素?
例如:如果我有值:[{name: 'apple', color: 'red'}, {name:'mango', color: 'yellow'}]
那么如何获得与上述相同的输出?我尝试了类似的东西<strong>{{ tag.name }}</strong>
,但它不起作用,只给了我要删除的空标签,如下所示:
关于如何实现我想要在这里做的任何想法?
解决方案
根据此问题,您尝试做的还不支持
您必须将对象数组映射到字符串数组并利用它。
然后,一旦您准备好“使用”您的标签,您就可以根据原始对象将它们映射回来。
这是一个相当简单的例子,说明可以做什么。
new Vue({
el: "#app",
computed: {
mappedTags() {
/* This is case sensitive */
return this.options.filter(option => this.value.includes(option.name))
}
},
data: {
value: [],
options: [{
name: 'Mango',
color: 'Orange'
},
{
name: 'Orange',
color: 'Orange'
},
{
name: 'Lemon',
color: 'Yellow'
},
{
name: 'Apple',
color: 'Red'
},
{
name: 'Banana',
color: 'Yellow'
},
]
}
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.4.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.js"></script>
<style>
/* Only added for better visibility on the text */
.text-stroke {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
</style>
<div id="app" class="p-3">
Valid (<b>Casesensitive</b>) tags - [Banana, Apple, Orange, Mango]
<b-form-tags v-model="value" no-outer-focus class="mb-2">
<template v-slot="{ tags, inputAttrs, inputHandlers, addTag, removeTag }">
<b-input-group aria-controls="my-custom-tags-list">
<b-input
v-bind="inputAttrs"
v-on="inputHandlers"
placeholder="New tag - Press enter to add"></b-input>
<b-input-group-append>
<b-button @click="addTag()" variant="primary">Add</b-button>
</b-input-group-append>
</b-input-group>
<ul class="list-unstyled d-inline-flex flex-wrap mb-0">
<b-card
v-for="tag in mappedTags"
:key="tag.name"
:id="`my-custom-tags-tag_${tag.name.replace(/\s/g, '_')}_`"
tag="li"
class="mt-1 mr-1"
body-class="py-1 pr-2 text-nowrap"
>
<strong :style="`color: ${tag.color}`" class="text-stroke">
{{ tag.name }}
</strong>
<b-button
@click="removeTag(tag.name)"
variant="link"
>
Remove
</b-button>
</b-card>
</ul>
</template>
</b-form-tags>
{{ mappedTags }}
</div>
推荐阅读
- java - 带案例的 PreparedStatement 更新
- html - 本地图像不适用于降价
我正在尝试使用降价来生成文档。当我使用
<img alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" src='http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg'/>
它时它正在工作并且它显示图像但是当我放置时<img alt="IMAGE A
- c++ - 动态调整大小数组代码在 C++ 中不起作用?
- javascript - 为 c++ 程序员解释的新的 javascript
- windows - Ros/Ros2 安装失败可能是由于依赖关系
- c# - 如何使用 Dapper 反序列化数组
- symfony - Symfony messenger:消费不工作(也不例外)
- c++ - .push_back 如何在 C++ 中工作?
- python - 显示包装函数的调用位置 - loguru
- python - 纯文本python中的Web服务器