Vue3/Vite中使用v-bind缩写绑定div的id属性无效？

嘿，我来帮你理清这个问题～

首先直接给结论：这既不是Vue 3/Vite的bug，也不是Okta的问题，就是咱们用v-bind的时候不小心踩了个小坑，你最后自己的猜测其实是对的！

咱们来拆解一下原因：

• 当你写:id="okta-signin-container"的时候，Vue会把双引号里的内容当作JavaScript表达式去解析。而okta-signin-container并不是你在组件里定义的变量，Vue会把它识别成未定义的标识符，最终解析出来的结果就是NaN，这也就是Vue Devtools里显示id为NaN的原因——Okta组件找不到正确的容器，自然就渲染不出来了。
• 而当你去掉冒号写id="okta-signin-container"时，这是原生HTML的写法，引号里的内容是字符串字面量，浏览器会直接把它作为div的id属性值，Okta组件自然就能定位到这个容器并正常渲染。

补充一下什么时候需要用v-bind（也就是那个冒号缩写）：v-bind是用来动态绑定属性值的，只有当你需要根据组件的data、props或者计算属性来动态改变id的时候才需要用它。比如你在组件里定义了一个变量：

<script setup>
const oktaContainerId = 'okta-signin-container'
</script>

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

这样写的话，Vue会把变量oktaContainerId的值作为div的id，同样能让Okta组件正常工作。

简单来说，如果你只是要给id一个固定的字符串值，完全不需要用v-bind，直接写原生的id属性就好啦～

备注：内容来源于stack exchange，提问作者smportis