Creating a component from a ListView in nativescript-vue

Question

I am learning nativescript-vue and trying to use single file components to make my code cleaner. I started with this simple example which renders quite nicely in my emulator:

<template>
    <Page>
        <ActionBar title="Welcome to Yellow Bucket!" android:flat="true"/>
        <TabView android:tabBackgroundColor="#53ba82"
                 android:tabTextColor="#c4ffdf"
                 android:selectedTabTextColor="#ffffff"
                 androidSelectedTabHighlightColor="#ffffff">
            <TabViewItem title="Movies">
                <GridLayout columns="*" rows="*">
                    <Label class="message" :text="msg" col="0" row="0"/>
                </GridLayout>
            </TabViewItem>
            <TabViewItem title="Customers">
                <ListView for="customer in customers" @itemTap="onItemTap" class="list-group" style="height:1250px">
                    <v-template>
                        <FlexboxLayout flexDirection="row" class="list-group-item">
                            <Label :text="customer.name" class="list-group-item-heading label-text" style="width: 100%"/>
                        </FlexboxLayout>
                    </v-template>
                </ListView>
            </TabViewItem>
            <TabViewItem title="About">
                <GridLayout columns="*" rows="*">
                    <Label class="message" text="About Yellow Bucket" col="0" row="0"/>
                </GridLayout>
            </TabViewItem>
        </TabView>
    </Page>
</template>

<script>
    import axios from "axios";

    function Customer({id, name, email, isAdmin}) {
        this.id = parseInt(id);
        this.name = name;
        this.email = email;
        this.isAdmin = isAdmin
    }

    export default {
        data() {
            return {
                msg: 'Hello World!',
                customers: []
            }
        },
        methods: {
            onItemTap: function (args) {
                console.log("Item with index: " + args.index + " tapped");
            }
        },
        mounted() {
            axios.get("https://example.com/api/customers").then(result => {
                result.data.forEach(customer => {
                    this.customers.push(new Customer(customer));
                })
            }, error => {
                console.error(error);
            })
        }
    }
</script>

<style scoped>

    .label-text {
        color: #444444;
    }
</style>

What I want to do is take the ListView and make it a separate component called . I am struggling to understand how I do this. In my Vue web code, I have a component that looks like this:

<customer-component
                    v-for="(customer, index) in customers"
                    v-bind="customer"
                    :index="index"
                    :key="customer.id"
                    @view="view"
                    @rentals="rentals"
            ></customer-component>  

Then, in CustomerComponent I have the HTML that renders each customer properly and adds some buttons that calls other routes, etc.

I think my question is this... In nativescript-vue it looks like ListView is doing the looping and the is handling the layout. How does that translate to using a separate component for the rendering of the customer list?

Answer 1

Create your template:

<template>
  <ListView for="item in items">
    <v-template>
      <StackLayout orientation="vertical">
        <Label class="title" :text="item.title"/>
        <Label class="message" :text="item.message"/>
        <Button @tap="itemButtonTapped(item)" class="btn" :text="item.buttonName"/>
      </StackLayout>
    </v-template>
  </ListView>
</template>

Add props to your component, you can create anything you like for example you want a callback so you can create a prop named callback and make it a function.

props: {
  items: Array,
  callback: Function
},

Let's say we will call this component CustomList.vue

Now in your other file you can import the component

import CustomList from "./CustomList.vue"

Add the component to your vue file via the components field.

components: { CustomList }

Now you can use it inside the template like this:

<custom-list :items="myItems"></custom-list>

Hope this helps,

Menno