[Vuejs]-Is it impossible to call a vue js funtion from android webview?

by

0👍

May be too late you joint the discussion. You can mount the app and try accessing it from your android webview code

    const resumeApp = Vue.createApp({
  data() {
    return {
      resume: {
        ...resumeEN,
        address: [resumeEN.country, resumeEN.city, resumeEN.postalCode]
          .filter(Boolean)
          .join(", "),
        lang: lang,
      },
    };
  },
  methods: {
    changeLang: function (lang) {
      this.resume = resumeEN;
    },

    renderResumeDocument: function (jsonData) {
      this.resume = jsonData;
    },
  },
});

var mobileAppProxyObj = resumeApp.mount("#app");

From your android web view

  resumeViewerBinding.webViewResumeViewer.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, weburl: String?) {
                resumeViewerBinding.webViewResumeViewer.loadUrl("javascript:mobileAppProxyObj.renderResumeDocument('Javascript function in webview')")
            }
        }

-1👍

Probably TypeScript is the problem. Just stick to ES5 and try it again.

Also, have you loaded the Vue JS runtime in the HEAD of your HTML?

Edit:
You have to include Vue JS in your index.html … Refer this:
(note the script tag inside head section>

https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

Leave a comment