How to pass an svg in a ternary operator?-CodePudding

I have a very expansive custom input and one of the customizations is autocomplete functionality. In the interest of not sharing too much, I will just share the bit of the code that is for the suggestion drop down on the autocomplete. I have a suggestions value and a searchHistory value that is based on the cached search history of the user. To differentiate the two I just want to have a clock or some sort of svg in there. I'm able to render an emoji, but that doesn't fit my design theme so I want to use an clock svg from the library I'm using.

How can I pass that SVG in this ternary operator? I've seen people using '<img :src"../something"/>', but that syntax doesn't seem to work for me either.

Any ideas on how/if I can make this happen?

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>

CodePudding user response：

A ternary shouldn't be used here because HTML elements can't be used in text interpolation.

v-if directive should be used instead:

<svg v-if="searchHistory.includes(suggestion)">
  ...