VueJS: Convert normal JS to vueJs and with ref

Question

I have the following code in normal JS and I have like to convert it to vuejs.

HTML:

<div id="ndi"></div>

JS:

const initAuthSessionResponse = window.NDI.initAuthSession(
        "ndi",
        {
          clientId: "abcd1234", // Replace with your client ID
          redirectUri: "https://primuslogin.firebaseapp.com/callback/", // Replace with a registered redirect URI
          scope: "openid",
          responseType: "code"
        },
        authParamsSupplier,
        onError
      );

In vuejs this is how I do it but somehow it doesn't work.

<div ref="ndi"></div>

  window.NDI.initAuthSession(
    this.$refs.ndi,
    {
      clientId: "abcd1234", // Replace with your client ID
      redirectUri: "https://primuslogin.firebaseapp.com/callback/", // Replace with a registered redirect URI
      scope: "openid",
      responseType: "code"
    },
    { state: "abc", nonce: "def" },
    this.onError
  );

I wonder how I can convert the id in div to vuejs style which usually is done with using ref. Any help would be greately appreciated.

Here is the whole vuejs version: https://gist.github.com/somaria/e965264060502a3c1554953487c7dcff

And this is the normal js version: https://gist.github.com/somaria/e965264060502a3c1554953487c7dcff

The normal js version works well but I have like to convert it to vuejs.

tony19 · Accepted Answer · 2021-03-14T03:51:35.970

Based on my experiments with window.NDI.initAuthSession, it seems the first parameter must be an element ID. It does not accept an element instance, so you can't use Vue's template refs here.

The only solution I see is to apply an ID to an element in the component like you were already doing in the original markup.

If you intend to have multiple instances of the Vue component on the page simultaneously, a unique ID would be required so that the element lookup would select the right instance. You could generate a unique ID as shown below:

<template>
  <div :id="uniqueId"></div>
</template>

<script>
let nextId = 0
const generateId = () => `ndi-${nextId++}`

export default {
  async mounted() {
    this.uniqueId = generateId()
    // wait $nextTick for id binding to take effect
    await this.$nextTick()

    window.NDI.initAuthSession(this.uniqueId, ...)
  }
}
</script>

Also, I noticed you wait 3 seconds after injecting the NDI script before using window.NDI. It's safe to use window.NDI when the script has loaded, so you could add a load-event listener (or set onload):

const embeddedScript = document.createElement('script')
embeddedScript.src = '...'
embeddedScript.onload = () => window.NDI.initAuthSession(...)

demo

VueJS: Convert normal JS to vueJs and with ref

1 Answers1