Vuetify v-autocomplete使用item与selection插槽时文本无高亮问题

问题根源 #

Vuetify的v-autocomplete内置的输入文本匹配高亮逻辑，仅作用于组件默认的item、selection插槽渲染流程。你自定义插槽时，相当于完全替换了默认的渲染内容，内置高亮处理（匹配字符包裹高亮样式标签的逻辑）未执行，因此高亮效果丢失。
你尝试调用的genFilteredText是组件内部私有方法，不同Vuetify版本的入参、执行上下文要求不同，直接调用无法保证拿到正确的高亮结果。

解决方法 #

推荐自行实现高亮逻辑，不受Vuetify版本迭代影响，可100%还原默认高亮效果：

1. 新增通用高亮处理工具方法

/**
 * 生成带匹配高亮的文本内容
 * @param {string} originText 原始待展示文本
 * @param {string} searchKey 当前输入框搜索关键词
 * @returns {string} 带高亮标签的html字符串
 */
function highlightMatch(originText, searchKey) {
  // 无搜索关键词直接返回原文本
  if (!searchKey?.trim()) return originText
  // 转义正则特殊字符避免报错
  const escapedKey = searchKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const matchReg = new RegExp(`(${escapedKey})`, 'gi')
  // 复用Vuetify内置高亮类名，和默认样式完全一致
  return originText.replace(matchReg, '<span class="v-autocomplete__match">$1</span>')
}

2. 在自定义插槽中使用该方法，通过v-html渲染处理后的内容

<!-- 自定义item插槽示例 -->
<template #item="{ item, parent }">
  <span v-html="highlightMatch(item.title, parent.searchInput)"></span>
</template>

<!-- 自定义selection插槽示例 -->
<template #selection="{ item, parent }">
  <span v-html="highlightMatch(item.title, parent.searchInput)"></span>
</template>

注意事项 #

如果待展示的item.title属于用户可输入的非可信内容，建议先对原始文本做XSS安全转义后再执行高亮处理，避免注入风险。

内容的提问来源于stack exchange，提问作者mending3