Auto generate template name when a condition is provided.

rigor789 · rigor789 · commit 7ba5b1b2e2f4 · 2017-12-12T10:22:30.000Z
diff --git a/platform/nativescript/runtime/components/v-template.js b/platform/nativescript/runtime/components/v-template.js
@@ -2,13 +2,13 @@ import { patch } from '../patch'
 
 export const VUE_VIEW = '__vueVNodeRef__'
 
+let tid = 0
 export default {
   name: 'v-template',
 
   props: {
     name: {
-      type: String,
-      default: 'default'
+      type: String
     },
 
     if: {
@@ -23,7 +23,7 @@ export default {
 
     this.$parent.$templates = this.$parent.$templates || new TemplateBag()
     this.$parent.$templates.registerTemplate(
-      this.$props.name,
+      this.$props.name || (this.$props.if ? `v-template-${tid++}` : 'default'),
       this.$props.if,
       this.$scopedSlots.default
     )
diff --git a/samples/app/app-with-v-template.js b/samples/app/app-with-v-template.js
@@ -38,7 +38,12 @@ new Vue({
                         <Label :text="item.value" style="color: blue;"/>
                     </StackLayout>
                 </v-template>
-                <v-template name="test" if="item.odd">
+                <v-template if="item.value.length == 2">
+                    <StackLayout style="padding: 50;">
+                        <Label :text="item.value" style="color: green;"/>
+                    </StackLayout>
+                </v-template>
+                <v-template if="item.odd">
                     <StackLayout style="padding: 50;">
                         <Label :text="item.value" style="color: red;"/>
                     </StackLayout>
