Nativescript Vue条件v模板不起作用

Posted 2023-04-13

【中文标题】Nativescript Vue条件v模板不起作用

【英文标题】：Nativescript Vue conditional v-template not working

【发布时间】：2019-09-04 02:21:10

【问题描述】：

我有一个 ListView 可以呈现这个：

    <ListView v-for="(item, index) in items" >
       <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 ]

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

如何让条件起作用？

【问题讨论】：

你能分享一个可以重现问题的 Playground 示例吗？

【参考方案1】：

<v-template> 使用 if，而不是 v-if。此外，您无法访问if 中的items（如here 所述）。 此外，您应该使用for 而不是v-for。

所以你可以这样做：

1- 将模板更改为：

    <ListView for="(item, index) in listItems" >
       <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;
    );
  

【讨论】：

另外他应该只使用for 而不是v-for

【参考方案2】：

您应该使用for 而不是v-for。此外，对于ListView 中的索引，有一个默认的$index 变量，因此您可以如下使用它。

<ListView for="item in items" >
   <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>