标签上的nativescript vue for循环

<template>
  <Page>
    <ListView for="item in items" @itemTap="onItemTap">
      <v-template>
        <FlexboxLayout flexDirection="row" class="item">
          <Image :src="item.image" class="image"/>
          <StackLayout class="info">
            <Label :text="item.name" class="name"/>
            <Label :text="item.price" class="price"/>
          </StackLayout>
        </FlexboxLayout>
      </v-template>
    </ListView>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: '$10', image: 'res://item_a.png' },
        { name: '商品B', price: '$20', image: 'res://item_b.png' },
        // ...更多商品
      ]
    };
  },
  methods: {
    onItemTap(event) {
      console.log('Tapped:', event.item);
    }
  }
};
</script>

<style scoped>
.item {
  padding: 10;
}
.image {
  width: 50;
  height: 50;
}
.name {
  font-size: 18;
  font-weight: bold;
}
.price {
  color: #888;
}
</style>