Nativescript Vue conditional v-template not working

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?

Can you share a Playground sample where the issue can be reproduced? — Manoj

Tiago A. Tiago A. · Accepted Answer · 2019-04-14T23:45:46

<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;
    });
  }
}

Nativescript Vue conditional v-template not working

2 Answers