NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
v-view

The v-view directive lets you set the current element's View as a parent property.


<Child v-view:parentPropertyName />
<!-- same as: -->
<Child ~parentPropertyName />
<Child v-view:parentArrayPropertyName.array />
<!-- same as: -->
<Child ~parentArrayPropertyName.array />

Example: <RadSideDrawer>

The <RadSideDrawer> component is part of the Progress NativeScript UI package.

The <RadSideDrawer> component requires the drawerContent and mainContent properties to be set to View instances. Using the v-view directive, you can do this with a few lines of code:

<RadSideDrawer>
  <StackLayout ~drawerContent />
  <StackLayout ~mainContent />
</RadSideDrawer>

Without the v-view directive, you need to go a more tedious and error-prone route:

<RadSideDrawer ref="drawer">
  <StackLayout ref="drawerContent" />
  <StackLayout ref="mainContent" />
</RadSideDrawer>
{
  mounted() {
    this.$refs.drawer.nativeView.drawerContent = this.$refs.drawerContent.nativeView
    this.$refs.drawer.nativeView.mainContent = this.$refs.mainContent.nativeView
  }
}
Contributors