Label text Label text Label text Label text

Vue.js:如何为每个组件实例设置唯一的ID?

vue.js Vue.js

神奇古一

2020-03-10

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

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

如何为每个组件实例设置唯一的ID?

谢谢。

第413篇《Vue.js:如何为每个组件实例设置唯一的ID?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
乐LEY 2020.03.10

也可以使用这种模式(Vue 2.0 v-bind)来实现,所以可以说您有一个要迭代的项目列表,并且想要给一些dom元素提供唯一的ID。

new Vue({

  el:body,
  data: {
     myElementIds : [1,2,3,4,5,6,8]
   }
})

HTML

<div v-for="id in myElementIds">
    <label v-bind:for="id">Label text for {{id}}</label>
    <input v-bind:id="id" type="text" />
<div> 

希望能帮助到你

达蒙Davaid斯丁 2020.03.10

如果您的uid不被其他工具使用,我有个主意。

uid: Math.random()

简单而足够。

小卤蛋猴子猪猪 2020.03.10

对于在多个组件中的DOM中具有非唯一ID的根本问题,此软件包似乎是一个很好的解决方案:

vue-uniq-ids

使用组件是一种趋势。组件很酷,它们很小,很明显,易于使用且模块化。直到id属性。

某些HTML标签属性需要使用id属性,例如label [for],input [form]和许多aria- *属性。id的问题在于它不是模块化的。如果页面上的多个id属性具有相同的值,则它们可能会相互影响。

VueUniqIds帮助您摆脱这个问题。它提供了一组与id相关的指令,该值通过添加唯一的字符串自动修改,同时保持属性易于阅读。

GO宝儿 2020.03.10

在Vue2中,使用v-bind。

说我有一个民意调查对象

  <div class="options" v-for="option in poll.body.options">
    <div class="poll-item">
      <label v-bind:for="option._id" v-bind:style="{color: option.color}">{{option.text}}</label>
      <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id">
  </div>
  </div>
泡芙古一神无 2020.03.10

就Nihat而言(以上):Evan您建议不要使用_uid:“ vm _uid保留供内部使用,将其保持私有状态(而不是在用户代码中依赖它)很重要,这样我们就可以灵活地更改其潜在的未来用例的行为。...我建议您自己生成UID(使用模块,全局mixin等)”

此GitHub问题中使用建议的mixin 生成UID似乎是一种更好的方法:

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};
达蒙JinJin 2020.03.10

每个组件都有一个唯一的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。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android