Условный v-шаблон Nativescript Vue не работает

У меня есть 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 без каких-либо кнопок, определенных в моем коде.

Как заставить работать условие?


nativescript nativescript-vue
person Adis Azhar    schedule 13.04.2019    source источник
comment
Не могли бы вы поделиться образцом игровой площадки, где можно воспроизвести проблему?   -  person Manoj    schedule 13.04.2019

Ответы (2)


arrow_upward
2
arrow_downward

<v-template> использует if, а не v-if. Кроме того, вы не можете получить доступ к items в 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>

Это будет использовать другой список listItems, который вы можете создать с помощью вычисляемой опоры, например:

computed: {
  listItems() {
    return this.items.map((item, index) => {
      item.isLast = index === items.length - 1;
      return item;
    });
  }
}
person Tiago A.    schedule 14.04.2019
comment
Также ему следовало использовать только for вместо v-for - person Rakesh Sojitra; 24.04.2019

arrow_upward
0
arrow_downward

Вам следует использовать 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>                         

   <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>
person Rakesh Sojitra    schedule 24.04.2019