Vue.js:如何为每个组件实例设置唯一 ID? [英] Vue.js : How to set a unique ID for each component instance?
本文介绍了Vue.js:如何为每个组件实例设置唯一 ID?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用 Vue.js 创建一个包含标签和输入的组件.例如:
<input id="inputId";类型=文本"/>
如何为每个组件实例设置唯一 ID?
解决方案
每个组件都有一个唯一的 id,可以通过 this._uid
访问.
<div><label :for=id">{{id}}的标签文本</label><输入:id=id"类型=文本"/>
模板><脚本>导出默认{数据 () {返回 {id:空}},挂载(){this.id = this._uid}}
如果您想对 id 进行更多控制,例如,可以在父组件中生成它们.
I want to create a component with Vue.js containing a label and an input. for example :
<label for="inputId">Label text</label>
<input id="inputId" type="text" />
How can I set a unique ID for each component instance?
解决方案
Each component has a unique id which can be accessed as 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>
If you want more control over the ids you can for example, generate them inside a parent component.
这篇关于Vue.js:如何为每个组件实例设置唯一 ID?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文