Question

我有一个呈现此内容的ListView：

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

如果索引到达数组的最后一个元素，则第二个v-template块应为呈现的块。

这是我拥有的数组：

items: [1, 2, 3, 1, 1, 1 ,1 ,1 ,1 ]

页面上呈现的是每个元素的值：1, 2, 3, 1 ...在TextField中，而我的代码中未定义任何按钮。

我如何获得有条件的工作？

Answer 1

<v-template>使用if，而不是v-if。另外，您无法访问items中的if（如here所述）。另外，您应该使用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>

这将使用另一个列表listItems，您可以使用计算的道具来构建列表，如下所示：

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

Answer 2

您应该使用put而不是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>

Nativescript Vue条件v模板不起作用

2 个答案: