如何在三元运算符中传递 svg？

Question

我有一个非常广泛的自定义输入，其中一项自定义是自动完成功能。为了不分享太多，我将只分享一些用于自动完成建议下拉的代码。我有一个 suggestions 值和一个基于缓存的用户搜索历史的 searchHistory 值。为了区分这两者，我只想在其中放置一个时钟或某种 svg。我可以渲染表情符号，但这不符合我的设计主题，所以我想使用我正在使用的库中的时钟 svg。

如何在此三元运算符中传递该 SVG？我见过有人使用 '<img :src"../something"/>'，但这种语法似乎也不适合我。

关于 how/if 我能做到这一点有什么想法吗？

干杯！

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>

Answer 1

此处不应使用三元，因为 HTML 元素不能用于文本插值。

v-if 应该改用指令：

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

如何在三元运算符中传递 svg？

How to pass an svg in a ternary operator?

javascript

svg

conditional-operator

vue.js