Nativescript Vue条件v模板不工作

我有一个列表视图，它呈现以下内容：

    <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> 

页面上呈现的是每个元素的值：

1,2,3,1…

在文本字段中，没有在我的代码中定义任何按钮

如何使条件生效？

使用

if

，而不是

v-if

。此外，如果（如上所述），则无法访问中的项目。 此外，您应该使用

for

而不是

v-for

这就是你能做的：

1-将模板更改为：

    <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> 

---

您应该使用

for

而不是

v-for

。另外，对于

ListView

中的索引，有一个默认的

$index

变量，因此您可以按如下方式使用它

<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>                         

你能分享一个游乐场的样本吗？他应该只使用

for

而不是

v-for

computed: {
  listItems() {
    return this.items.map((item, index) => {
      item.isLast = index === items.length - 1;
      return item;
    });
  }
}

<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>