Nativescript Vue conditional v-template not working - nativescript

Question

I have a ListView which renders this:
<ListView v-for="(item, index) in items" height="500">
<v-template v-if="index < items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<!-- render if index reaches last element -->
<v-template v-if="index == items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>
The second v-template block should be the one rendered if the index reaches last element of the array.
This is the array I have:
items: [1, 2, 3, 1, 1, 1 ,1 ,1 ,1 ]
Whats being rendered on the page is rather the value of each element: 1, 2, 3, 1 ... in TextField without any buttons defined in my code.
How do I get the conditional to work?

Answer 1

<v-template> uses if, not v-if. Also, you can't access items in the in the if (as described here).
Also, you should use for instead of v-for.
So this is what you can do:
1- Change the template to:
<ListView for="(item, index) in listItems" height="500">
<v-template if="!item.isLast">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<!-- render if index reaches last element -->
<v-template if="!item.isLast">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>
This would use another list listItems, which you could build with a computed prop like so:
computed: {
listItems() {
return this.items.map((item, index) => {
item.isLast = index === items.length - 1;
return item;
});
}
}

Answer 2

You should have to use for instead of v-for. Also, For the index in ListView, there is a default $index variable so you can use it as below.
<ListView for="item in items" height="500">
<v-template v-if="$index < items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="X" row="0" col="2" />
</GridLayout>
</v-template>
<v-template v-if="$index == items.length - 1">
<GridLayout rows="*, *", columns="220,130,*">
<TextField hint="Project Item" row="0" col="0" />
<TextField hint="Price" row="0" col="1" />
<Button text="index" row="0" col="2" />
</GridLayout>
</v-template>
</ListView>