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">`. While
we do that, make sure that ':key' attributes in 'v-for' directives
are not written out to the output.

Bug: T398011

Author: codders

src/Component.php

@@ -204,8 +204,9 @@ 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' );
 
-			foreach ( $data[$listName] as $item ) {
+			foreach ( $this->app->evaluateExpression( $listName, $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>',
@@ -225,6 +234,15 @@ public function testTemplateWithForLoopMustache_RendersCorrectValues() {
 		$this->assertSame( '<p><a>1</a><a>2</a></p>', $result );
 	}
 
+	public function testTemplateWithForLoopAndKey_DropsKeyAttributeFromOutput() {
+		$result = $this->createAndRender(
+			'<p><a v-for="item in list" :key="item">{{item}}</a></p>',
+			[ 'list' => [ 1, 2 ] ]
+		);
+
+		$this->assertSame( '<p><a>1</a><a>2</a></p>', $result );
+	}
+
 	public function testTemplateWithAttributeBinding_ConditionIsFalse_AttributeIsNotRendered() {
 		$result = $this->createAndRender( '<p :attr1="condition"></p>', [ 'condition' => false ] );