Javascript VueJS：将普通JS转换为VueJS并使用ref

我在普通JS中有以下代码，我想将其转换为vuejs

HTML:

在vuejs中，我就是这样做的，但不知怎的，它不起作用

<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
  );

window.NDI.initAuthSession(
这是$refs.ndi，
{
clientId:“abcd1234”//替换为您的客户ID
重定向URI:“https://primuslogin.firebaseapp.com/callback/“，//替换为已注册的重定向URI
范围：“openid”，
响应类型：“代码”
},
{国家：“abc”，临时名称：“def”}，
这是一个错误
);

我想知道如何将div中的id转换为vuejs样式，这通常是通过使用ref完成的。如果有任何帮助，我将不胜感激

以下是整个vuejs版本：

这是正常的js版本：

---

正常的js版本工作得很好，但我喜欢将其转换为vuejs。

根据我对

window.NDI.initAuthSession

的实验，第一个参数似乎必须是元素ID。它不接受元素实例，因此不能在此处使用Vue的模板引用

我看到的唯一解决方案是将ID应用于组件中的元素，就像您在原始标记中所做的那样

如果您希望在页面上同时有多个Vue组件实例，则需要一个唯一的ID，以便元素查找可以选择正确的实例。您可以生成一个唯一的ID，如下所示：

设nextId=0
const generateId=（）=>`ndi-${nextId++}`
导出默认值{
异步装入（）{
this.uniqueId=generateId（）
//等待$nextTick以使id绑定生效
等待此消息。$nextTick（）
window.NDI.initAuthSession（this.uniqueId，…）
}
}

另外，我注意到您在注入NDI脚本后等待3秒钟，然后才使用

window.NDI

。加载脚本后可以安全地使用

window.NDI

，因此可以添加

load

-事件侦听器（或设置

onload

）：

const embeddedScript=document.createElement（'script'）
embeddedScript.src='…'
embeddedScript.onload=（）=>window.NDI.initAuthSession（…）

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
      );

<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
  );