hx-valshx-vals 属性を使用すると、AJAX リクエストで送信されるパラメーターに追加できます。
この属性の値は、既定では JSON (JavaScript オブジェクト表記法) 形式の名前-式の値のリストです。
hx-vals で指定された値を評価する場合は、値の前に javascript: または js: を付けることができます。
<div hx-get="/example" hx-vals='{"myVal": "My Value"}'>Get Some HTML, Including A Value in the Request</div>
<div hx-get="/example" hx-vals='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Value from Javascript in the Request</div>
評価済みのコードを使用する場合、event オブジェクトにアクセスできます。この例では、input 内で最後にタイプされたキーの値が含まれています。
<div hx-get="/example" hx-trigger="keyup" hx-vals='js:{lastKey: event.key}'>
<input type="text" />
</div>
また、スプレッドオペレーターを使用して値を動的に指定することもできます。これにより、関数によって返されたオブジェクトのすべてのプロパティを含めることができます。
<div hx-get="/example" hx-vals='js:{...foo()}'>Get Some HTML, Including All Values from foo() in the Request</div>
この例では、foo() が {name: "John", age: 30} のようなオブジェクトを返した場合、name と age の両方がリクエストのパラメーターとして含まれます。
hx-vals の値は有効な JSON でなければなりません。動的に計算されるのはではありません。javascript: プレフィックスを使用する場合は、特にクエリ文字列やユーザー生成コンテンツなど、ユーザー入力に対処する場合にセキュリティ上の問題が発生する可能性があることに注意してください。これにより、クロスサイトスクリプティング (XSS) の脆弱性が発生する可能性があります。hx-vals は継承され、親要素に配置できます。