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

Question

我在普通 JS 中有以下代码，我想将其转换为 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
      );

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

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

这里是整个vuejs版本： https://gist.github.com/somaria/e965264060502a3c1554953487c7dcff

这是普通的 js 版本： https://gist.github.com/somaria/e965264060502a3c1554953487c7dcff

普通的js版本运行良好，但我想将其转换为vuejs。

Answer 1

根据我对 window.NDI.initAuthSession 的实验，似乎第一个参数必须是一个元素 ID。它不接受元素实例，所以你不能在这里使用 Vue 的模板引用。

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

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

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

此外，我注意到您在使用 window.NDI 之前注入 NDI 脚本后等待 3 秒。加载脚本后使用 window.NDI 是安全的，因此您可以添加一个 load 事件侦听器（或设置 onload）：

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

demo

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

VueJS: Convert normal JS to vueJs and with ref

javascript

vue.js

nuxtjs