I have a complex custom input with autocomplete functionality as part of the customization. To maintain confidentiality, I will only share the snippet of code related to the suggestion drop-down in the autocomplete feature. I have two values - suggestions and searchHistory - based on the user's cached search history. To distinguish between the two, I want to display either a clock icon or an SVG image. While I can render an emoji, it doesn't align with my design theme, so I'm looking to use a clock SVG from my library.
How can I include this SVG in the ternary operator? I've seen examples of people using '<img :src="..something"/>', but that syntax doesn't work for me.
Any suggestions on how I can achieve this?
Cheers!
CAutocompleteList.vue
<template>
<ul>
<li
v-for="suggestion in filteredSuggestions"
:key="suggestion"
@click="$emit('selectSuggestion', suggestion)"
>
{{ suggestion }} {{ searchHistory.includes(suggestion) ? '⏱' : '' }}
</li>
</ul>
<!-- <IconPowerSupplyOne theme="outline" size="100%" fill="#4771FA" /> -->
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export default defineComponent({
props: {
filteredSuggestions: { type: Array as PropType<string[]>, required: true },
searchHistory: { type: Array as PropType<string[]>, required: true },
},
emits: ['selectSuggestion'],
setup() {
return {}
},
})
</script>