How to get element in nativescript using vue?

Question

I want to get Image element with id='item' on created.

I can't seem to find anything on google. Most of the tutorial on the internet is using Typescript and always start with page=args.object

export function pageLoaded(args) {
    page = args.object;
    item = page.getViewById("item");
}

score 9 · Accepted Answer · answered Aug 25 '18 at 11:03

9

You can use refrences for this.

Sample xml:

<StackLayout ~body class="body" row="1">

or:

<StackLayout ref="body" class="body" row="1">

Sample code:

mounted() {
  let body = this.$refs.body;
}

answered Aug 25 '18 at 11:03

Mennolp

424
4
17

3

Also you can access the nativeview by accessing it's property: let nativeLayout = this.$refs.body.nativeView; – Mennolp Aug 25 '18 at 11:05
May I ask, where do you found this? Is it on the official document or vue document? – GTHell Aug 25 '18 at 13:55
@GTHell I found this at: https://github.com/nativescript-vue/nativescript-vue/issues/49 I always try to find a solution for my questions via the nativescript documentation, the vue documentation, the nativescript-vue documentation, the nativescript repository and the nativescript-vue repository. If I can't find anything there I ask the slack community or on Stackoverflow. – Mennolp Aug 27 '18 at 08:06

score 6 · Answer 2 · answered Apr 03 '19 at 13:08

As mentioned in the comments of the other answers:

<StackLayout ref="body" class="body" row="1">

mounted() {
  let body = this.$refs.body;
}

Also you can access the nativeView by accessing it's property: let nativeLayout = this.$refs.body.nativeView;

In NativeScript-Vue the nativeView of a ViewComponent is the wrapper element of the actual native platform (iOS/Android) element/view.

For example the nativeView of the ref="body" is the StackLayout of the tns-core-modules and it has a nativeViewProtected property which is the actual native framework element (on iOS UIView and android.view.View on Android)

How to get element in nativescript using vue?

2 Answers2