Syntax for string interpolation in Vue 3 template attribute with quotes

Question

I'm trying to get the method buildAbbrToolTip() to use the dynamic data of column.m_parse_hi so that it displays the correct text definition for an abbreviation in the tooltip.

Currently, it's giving me TypeError: key is undefined in the console. I know that the function works, because if I replace column.m_parse_hi with 'VAI', it works correctly. I think the problem is that the function needs quotes around column.m_parse_hi because using VAI without quotes is undefined, but I can't figure out how to get it to interpret a string literal in attributes.

Codepen: https://codepen.io/holdenmad/pen/mdgEaOm

How I'm writing the function in the title attribute:

<abbr
  class="analysis row text-secondary text-nowrap"
  v-b-tooltip.hover
  :title="buildAbbrTooltip(column.m_parse_hi)"
>
  {{ column.m_parse_hi }}
</abbr>

The method:

buildAbbrTooltip(key) {
      if (this.abbreviations.hasOwnProperty(key)) {
        return this.abbreviations[key];
      } else {
        let substrings = key.split(/[' ',(,),>]/);
        let newString = "";

        for (let i = 0; i < substrings.length; i++) {
          if (this.abbreviations[substrings[i]] === undefined) {
            newString += " ";
          } else {
            newString += this.abbreviations[substrings[i]];
          }
        }
        return newString;
      }
    }

Answer 1

I figured out the answer. The syntax needed to interpolate a function that has data that requires quotes correctly is to use template literals around single quotes and then delimit with the ${} syntax.

 :title="buildTooltip(`'${column.m_parse_hi}'`)"