NOTE! You are browsing legacy documentation. For latest visit docs.nativescript.org.

NativeScript & Vue.JS

RadListView for Vue - Getting started

RadListView for Vue is exposed through the RadListViewComponent class. This article will guide you through the process of adding a RadListViewComponent in your application, binding it to a data-source and visualizing the items by using an item template of your choice. For more information on how each separate feature of RadListViewComponent is used, please refer to the dedicated articles which are using the same scenario and extend it further.

Installation

Run the following command to add the plugin to your application: 

tns plugin add nativescript-ui-listview

Adding a RadListView to your Vue app

The first step is installing the Vue plugin for RadListView integration, adding that fragment in the top of the main file entry (usually main.js or main.ts): 

import Vue from 'nativescript-vue';
import RadListView from 'nativescript-ui-listview/vue';

Vue.use(RadListView);

To add an instance of RadListViewComponent in an Vue template you need to use the <RadListView></RadListView> tag. You will also need to bind the control to a source of items and define an item template which will determine how each business object from the source collection will be visualized. The following Vue instance demonstrates this: 

export default {
  name: 'GettingStarted',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <StackLayout>
      <RadListView ref="listView"
                   for="item in itemList"
                   @itemTap="onItemTap">
        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="item.name" class="nameLabel"></Label>
            <Label :text="item.description" class="descriptionLabel"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data() {
    return {
      title: description,
      itemList: getItemList(10),
    };
  },
  methods: {
    onItemTap({ item }) {
      console.log(`Tapped on ${item.name}`);
    },
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    }
  }
};

Using ObservableArray

There are some caveats as the inner RadListView object does not know about Vue and does not observe the re-active Vue data. So, in order to fix the problem and update the list if some item changes, the Vue plugin does automatically refresh the control entirely if it detects any changes on the list.

This may cause some minor UI issues as scrolling to the first position when list changes, and this may not be a desired behavior.

If you want to get rid of this minor caveats, you can use ObservableArray instead of regular arrays. Using an ObservableArray instance as a source for RadListView will ensure that changes in the source collection will be automatically taken care of by the control

The previous code would be like this:

import { ObservableArray } from 'tns-core-modules/data/observable-array';
 export default {
  template: `
  <Page>
    <StackLayout>
      <RadListView ref="listView"
                   for="item in itemList"
                   @itemTap="onItemTap">
        <v-template>
          <StackLayout orientation="vertical">
            <Label :text="item.name"></Label>
            <Label :text="item.description"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </Page>
  `,
  data() {
    return {
      itemList: new ObservableArray([
        {name: 'Item 1', description: 'Item 1 description'},
        {name: 'Item 2', description: 'Item 2 description'},
        {name: 'Item 3', description: 'Item 3 description'},
      ]),
    };
  },
  methods: {
    onItemTap({ item }) {
      console.log(`Tapped on ${item.name}`);
    },
  }
};

References

Related articles you might find useful:

Ask the community