我有一個非常廣泛的自定義輸入，其中一項自定義是自動完成功能。為了不分享太多，我將只分享一些用于自動完成下拉建議的代碼。我有一個建議值和一個基于快取的用戶搜索歷史記錄的searchHistory值。為了區分這兩者，我只想在里面放一個時鐘或某種 svg。我可以渲染表情符號，但這不符合我的設計主題，所以我想使用我正在使用的庫中的時鐘 svg。
我怎樣才能在這個三元運算子中傳遞那個 SVG？我見過有人使用'<img :src"../something"/>'，但這種語法似乎也不適用于我。
關于如何/如果我能做到這一點的任何想法？
干杯!
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>
uj5u.com熱心網友回復：
此處不應使用三元組，因為 HTML 元素不能用于文本插值。
v-if應該使用指令：
<svg v-if="searchHistory.includes(suggestion)">
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/437497.html
標籤：javascript Vue.js svg 条件运算符
下一篇：無法找到賽普拉斯組件內的定位器