Merge pull request #42 from wmde/feat/handle-array-type-value-substitution-20250630

Handle array-type value substitution in Vue templates

Author: yerdua

src/Component.php

@@ -87,6 +87,13 @@ private function stripEventHandlers( DOMNode $node ) {
 		}
 	}
 
+	private function convertDataValueToString( $value ) {
+		if ( is_string( $value ) ) {
+			return $value;
+		}
+		return json_encode( $value );
+	}
+
 	/**
 	 * @param DOMNode $node
 	 * @param array $data
@@ -100,8 +107,7 @@ private function replaceMustacheVariables( DOMNode $node, array $data ) {
 
 			foreach ( $matches['expression'] as $index => $expression ) {
 				$value = $this->app->evaluateExpression( $expression, $data );
-
-				$text = str_replace( $matches[0][$index], $value, $text );
+				$text = str_replace( $matches[0][$index], $this->convertDataValueToString( $value ), $text );
 			}
 
 			if ( $text !== $node->textContent ) {

tests/php/TemplatingTest.php

@@ -346,6 +346,22 @@ public function testTemplateWithObjectValuedNonClassAttribute_ThrowsError() {
 		);
 	}
 
+	public function testMoustacheVariableWithArrayListTypeSubstitution() {
+		$result = $this->createAndRender(
+			'<p>{{ my.data.variable }}</p>',
+			[ 'my' => [ 'data' => [ 'variable' => [ 1, 2, 3 ] ] ] ]
+		);
+		$this->assertSame( '<p>[1,2,3]</p>', $result );
+	}
+
+	public function testMoustacheVariableWithArrayObjectTypeSubstitution() {
+		$result = $this->createAndRender(
+			'<p>{{ my.data.variable }}</p>',
+			[ 'my' => [ 'data' => [ 'variable' => [ "a" => "b", "c" => "d" ] ] ] ]
+		);
+		$this->assertSame( '<p>{"a":"b","c":"d"}</p>', $result );
+	}
+
 	/**
 	 * @param string $template HTML
 	 * @param array $data