Browse guides

Compose views with directives and v-html

Build an interactive view with conditional content, a keyed list and direct HTML content.

The example toggles a message with v-if, appends keyed items through v-for and renders rich text through v-html.

Table of contents

Main APIs

mount
Starts a Valyrian.js application on a DOM target.
v-if
Concept. Conditionally includes a vnode.
v-for
Concept. Renders an iterable through a callback child.
v-html
Concept. Assigns direct HTML content.
key
Concept. Stable vnode identity for reconciliation.
tsx
import { mount } from "valyrian.js";

const state = {
  showDetails: false,
  nextId: 2,
  items: [{ id: 1, label: "First item" }],
  html: "<strong>Taskboard details</strong>",
};

function toggleDetails() {
  state.showDetails = !state.showDetails;
}

function addItem() {
  state.items.push({ id: state.nextId, label: `Item ${state.nextId}` });
  state.nextId += 1;
}

function InteractiveList() {
  return (
    <main>
      <button onclick={toggleDetails}>Toggle details</button>
      <p v-if={state.showDetails}>Details are visible.</p>
      <section v-html={state.html} />

      <button onclick={addItem}>Add item</button>
      <ul v-for={state.items}>
        {(item: { id: number; label: string }) => (
          <li key={item.id}>{item.label}</li>
        )}
      </ul>
    </main>
  );
}

mount("body", InteractiveList);

Result

The mounted view updates the condition and list after each click while v-html assigns the rich content to its section.

Continue the cumulative application

Exact references