Files
TandoorRecipes/vue/src/components/GenericPill.vue
2021-12-30 15:33:34 -06:00

41 lines
1009 B
Vue

<template>
<div v-if="itemList">
<span :key="k.id" v-for="k in itemList" class="pl-1">
<b-badge pill :variant="color">{{ thisLabel(k) }}</b-badge>
</span>
</div>
</template>
<script>
export default {
name: "GenericPill",
props: {
item_list: { type: Object },
label: { type: String, default: "name" },
color: { type: String, default: "light" },
},
computed: {
itemList: function () {
if (Array.isArray(this.item_list)) {
return this.item_list
} else if (!this.item_list?.id) {
return false
} else {
return [this.item_list]
}
},
},
mounted() {},
methods: {
thisLabel: function (item) {
let fields = this.label.split("::")
let value = item
fields.forEach((x) => {
value = value[x]
})
return value
},
},
}
</script>