Function: getStringOrVNodeAsString()
ts
function getStringOrVNodeAsString(
input:
| string
| VNode<
RendererNode,
RendererElement,
{
[key: string]: any;
}
>,
): string;Converts a string or VNode to a plain string representation. This utility is essential for handling mixed content types where both plain text and rich VNode content need to be converted to string format for contexts that only accept text (like HTML attributes, tooltips, accessibility labels, etc.).
The function provides a safe and comprehensive way to extract meaningful text content from Vue's VNode structures while maintaining backwards compatibility with simple string inputs.
Parameters
| Parameter | Type | Description |
|---|---|---|
input | | string | VNode<RendererNode, RendererElement, { [key: string]: any; }> | Either a plain string or a Vue VNode to convert |
Returns
string
A plain string representation of the input content
Example
typescript
// String input - returned as-is
getStringOrVNodeAsString("Hello World"); // 'Hello World'
// VNode with text content
const textNode = h("span", "Hello VNode");
getStringOrVNodeAsString(textNode); // 'Hello VNode'
// Complex VNode with nested content
const complexNode = h("div", [
h("span", "Name: "),
h("strong", "John Doe"),
h("span", " (Admin)"),
]);
getStringOrVNodeAsString(complexNode); // 'Name: John Doe (Admin)'
// Usage in component context for title attributes
const result = props.stringifier(item); // Could be string or VNode
h(
"span",
{
title: getStringOrVNodeAsString(result), // Always string for HTML attribute
},
result,
); // Rich content rendered here