I'm struggling to make the method buildAbbrToolTip() utilize the dynamic data from column.m_parse_hi in order to display the correct text definition for an abbreviation in the tooltip.
Currently, I'm encountering a console error that says TypeError: key is undefined . I am aware that the function functions properly because when I replace column.m_parse_hi with 'VAI', it works as expected. I believe the issue lies in needing to surround column.m_parse_hi with quotes since using VAI without quotes results in undefined behavior. However, I am unsure how to specify a string literal within attributes.
Codepen Link: https://codepen.io/holdenmad/pen/mdgEaOm
How I am implementing 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 function:
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;
}
}