我想用Vue创建一个组件.包含标签和输入的js.例如:

<label for="inputId">Label text</label>
<input id="inputId" type="text" />

如何 for each 组件实例设置唯一的ID?

推荐答案

每个组件都有一个唯一的id,可以访问this._uid.

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: null
    }
  }, 
  mounted () {
    this.id = this._uid
  }
}
</script>

例如,如果希望对ID进行更多控制,可以在父组件中生成ID.

Vue.js相关问答推荐

Vue路由路径匹配行为

将Vite Vuejs应用部署到Apache服务器

写入计算值时出错,但我没有写入任何值

VueJS 中的 VisJS 时间轴:带有图像的项目放错了位置

Vue3如何将自定义事件绑定到路由视图中的特定组件?

Vuetify 复选框:如何停止点击事件?

如何使用 vue 或 javascript 向服务器发送密码?

如何 for each 用户分组聊天消息?

如何使 Rails 与 vue.js 一起工作?

Bootstrap-vue b-table,标题中带有过滤器

如何在 vue.js 中包含当年的版权?

如何获取 Vue 路由历史记录?

如何在 vue 3 脚本设置中使用

使用 Vue.js (cdn) 在特定元素上切换显示/隐藏

在手动安装的 vue 组件中使用 vuex

我可以使用react路由创建别名路由吗?

带有后退按钮的 Vue.js 路由

Vue.js 的 $emit 和 $dispatch 有什么区别?

将 Vue props与默认值合并

vue-cli@3 没有可用于依赖类型的模块工厂:CssDependency