diff --git a/src/Component.php b/src/Component.php
index 6c9443d..8a727e8 100644
--- a/src/Component.php
+++ b/src/Component.php
@@ -240,10 +240,21 @@ private function handleFor( DOMNode $node, array $data ) {
 			list( $itemName, $listName ) = explode( ' in ', $node->getAttribute( 'v-for' ) );
 			$node->removeAttribute( 'v-for' );
 
-			foreach ( $data[$listName] as $item ) {
+			if ( preg_match( '/\((?P<itemName>[^,]+)\s*,\s*(?P<keyName>[^\)]+)\)/', $itemName, $matches ) ) {
+				$itemName = $matches['itemName'];
+				$keyName = $matches['keyName'];
+			} else {
+				$keyName = null;
+			}
+
+			foreach ( $data[$listName] as $key => $item ) {
 				$newNode = $node->cloneNode( true );
 				$node->parentNode->insertBefore( $newNode, $node );
-				$this->handleNode( $newNode, array_merge( $data, [ $itemName => $item ] ) );
+				$newData = array_merge( $data, [ $itemName => $item ] );
+				if ( $keyName !== null ) {
+					$newData[$keyName] = $key;
+				}
+				$this->handleNode( $newNode, $newData );
 			}
 
 			$this->removeNode( $node );
diff --git a/tests/integration/fixture/gloss_widget.html b/tests/integration/fixture/gloss_widget.html
index 6d29613..22a3559 100644
--- a/tests/integration/fixture/gloss_widget.html
+++ b/tests/integration/fixture/gloss_widget.html
@@ -3,14 +3,14 @@
         <div class="wikibase-lexeme-sense-glosses-list">
             <table class="wikibase-lexeme-sense-glosses-table">
                 <tbody>
-                <tr v-for="gloss in glosses" class="wikibase-lexeme-sense-gloss">
+                <tr v-for="(gloss, index) in glosses" class="wikibase-lexeme-sense-gloss">
                     <td class="wikibase-lexeme-sense-gloss-language">
                         <span v-if="!inEditMode">{{gloss.language}}</span>
-                        <input v-else="" class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
+                        <input v-else class="wikibase-lexeme-sense-gloss-language-input" v-model="gloss.language" :disabled="isSaving">
                     </td>
                     <td class="wikibase-lexeme-sense-gloss-value">
                         <span v-if="!inEditMode" :dir="gloss.language|directionality" :lang="gloss.language">{{gloss.value}} <span class="wikibase-lexeme-sense-glosses-sense-id">({{senseId}})</span></span>
-                        <input v-else="" class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving">
+                        <input v-else class="wikibase-lexeme-sense-gloss-value-input" v-model="gloss.value" :disabled="isSaving" :autofocus="index == glosses.length - 1">
                     </td>
                 </tr>
                 </tbody>
diff --git a/tests/integration/fixture/lemma_widget.html b/tests/integration/fixture/lemma_widget.html
index 285a249..fe2346d 100644
--- a/tests/integration/fixture/lemma_widget.html
+++ b/tests/integration/fixture/lemma_widget.html
@@ -7,7 +7,7 @@
                 <span class="lemma-widget_lemma-language">{{lemma.language}}</span>
             </li>
         </ul>
-        <div v-else="">
+        <div v-else>
             <div class="lemma-widget_edit-area">
                 <ul class="lemma-widget_lemma-list">
                     <li v-for="lemma in lemmas" class="lemma-widget_lemma-edit-box">
diff --git a/tests/php/TemplatingTest.php b/tests/php/TemplatingTest.php
index 0d12618..6244613 100644
--- a/tests/php/TemplatingTest.php
+++ b/tests/php/TemplatingTest.php
@@ -196,6 +196,24 @@ public function testTemplateWithForLoopMustache_RendersCorrectValues() {
 		assertThat( $result, is( equalTo( '<p><a>1</a><a>2</a></p>' ) ) );
 	}
 
+	public function testTemplateWithForLoopWithIndex_RendersValuesAndIndices() {
+		$result = $this->createAndRender(
+			'<p><a v-for="(item, index) in list">{{index}}: {{item}}</a></p>',
+			[ 'list' => [ 10, 20 ] ]
+		);
+
+		assertThat( $result, is( equalTo( '<p><a>0: 10</a><a>1: 20</a></p>' ) ) );
+	}
+
+	public function testTemplateWithForLoopWithKey_RendersValuesAndKeys() {
+		$result = $this->createAndRender(
+			'<p><a v-for="(item, key) in list">{{key}}: {{item}}</a></p>',
+			[ 'list' => [ 'ten' => 10, 'twenty' => 20 ] ]
+		);
+
+		assertThat( $result, is( equalTo( '<p><a>ten: 10</a><a>twenty: 20</a></p>' ) ) );
+	}
+
 	public function testTemplateWithAttributeBinding_ConditionIsFalse_AttributeIsNotRendered() {
 		$result = $this->createAndRender( '<p :attr1="condition"></p>', [ 'condition' => false ] );