Handle member expressions in v-for statements

We currently support iterating over arrays in Vue statements, like
`<a v-for="item in list">`, but this support is currently limited
to data at the top-level of our template data object.

Add support for member expressions in v-for statements so that we
can handle statements like `<a v-for="item in list.data">`.

Bug: T398011

Author: codders

src/Component.php

@@ -9,6 +9,8 @@
 use DOMNodeList;
 use DOMText;
 
+use WMDE\VueJsTemplating\JsParsing\VariableAccess;
+
 class Component {
 
 	/**
@@ -204,8 +206,10 @@ private function handleFor( DOMNode $node, array $data ) {
 		if ( $node->hasAttribute( 'v-for' ) ) {
 			list( $itemName, $listName ) = explode( ' in ', $node->getAttribute( 'v-for' ) );
 			$node->removeAttribute( 'v-for' );
+			$node->removeAttribute( ':key' );
+			$listNameExpression = new VariableAccess( explode( '.', $listName ) );
 
-			foreach ( $data[$listName] as $item ) {
+			foreach ( $listNameExpression->evaluate( $data ) as $item ) {
 				$newNode = $node->cloneNode( true );
 				$node->parentNode->insertBefore( $newNode, $node );
 				$this->handleNode( $newNode, array_merge( $data, [ $itemName => $item ] ) );

tests/php/TemplatingTest.php

@@ -207,6 +207,15 @@ public function testTemplateWithForLoopAndSingleElementInArrayToIterate_Rendered
 		$this->assertSame( '<p><a></a></p>', $result );
 	}
 
+	public function testTemplateWithForLoopAndMemberExpressionForData_RenderedOnce() {
+		$result = $this->createAndRender(
+			'<p><a v-for="item in list.data"></a></p>',
+			[ 'list' => [ 'data' => [ 1 ] ] ]
+		);
+
+		$this->assertSame( '<p><a></a></p>', $result );
+	}
+
 	public function testTemplateWithForLoopAndMultipleElementsInArrayToIterate_RenderedMultipleTimes() {
 		$result = $this->createAndRender(
 			'<p><a v-for="item in list"></a></p>',