Nativescript-vue: How to get the webViewModule ?

[jarden-liu]

How to get webViewModule in the nativescript-vue, If I want to listen loadFinishedEvent action?
I can't get the webViewModule , console output undefined. That is my code as follow :

   <template>
    <Page ref="page" class="page">
        <ActionBar class="action-bar" title="CAS登录"> </ActionBar>
        <StackLayout>
            <WebView id="webView" :src="src" />
        </StackLayout>
    </Page>
   </template>

  import webViewModule from "tns-core-modules/ui/web-view";

  export default {
       data() {
           return {
               src: 'https:www.google.com'
           };
        },
        mounted() {
            let page = this.$refs.page.nativeView;
            let webView = page.getViewById('webView');
            console.log("webViewModule");
            console.log(webViewModule);
            webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
             let message;
             if (!args.error) {
                      message = "WebView finished loading " + args.url;
               }
               else {
                message = "Error loading " + args.url + ": " + args.error;
               }
             });

         }
    }; 

[rigor789]

The easiest would be to attach a loadFinished event listener to the webview directly:

 <template>
    <Page ref="page" class="page">
        <ActionBar class="action-bar" title="CAS登录"> </ActionBar>
        <StackLayout>
            <WebView @loadFinished="onLoadFinished" :src="src" />
        </StackLayout>
    </Page>
 </template>

{
 // ...
  methods: {
    onLoadFinished(args) {
      let message;
      if (!args.error) {
        message = "WebView finished loading " + args.url;
      } else {
        message = "Error loading " + args.url + ": " + args.error;
      }
    }
  }
}

But otherwise I think you need to use the import like this:
import * as webViewModule from "tns-core-modules/ui/web-view";

[jarden-liu]

As you say, I used the @loadFinished="onLoadFinished" event listener , and I caught the url. thank you very much.

However, I still can't import the webViewModule , like this import * as webViewModule from "tns-core-modules/ui/web-view";

it will cause something wrong, but nothing output in terminal console . I use vue-cli create the project by nativescript-vue/vue-cli-template .

The tns-core-modules/ui/web-view is seems to be .ts file. Maybe webpack.config.js is not configured any typescript loader ???

[rigor789]

There are ts files, but when it is installed through npm you will get .js files like web-view.android.js and web-view.ios.js these will get imported automatically when running on the device.

I just tried import * as webViewModule from "tns-core-modules/ui/web-view"; and it works as expected