Nativescript Vue условный v-шаблон не работает - PullRequest
Новая
       2

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

0 голосов
/ 13 апреля 2019

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

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

Ответы [ 2 ]

1 голос
/ 15 апреля 2019

<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;
    });
  }
}
0 голосов
/ 24 апреля 2019

Вы должны использовать 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>
...