使用 v-for 为每个输入添加标签

大佬教程收集整理的这篇文章主要介绍了使用 v-for 为每个输入添加标签，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 v-for 为每个输入添加标签？

我正在尝试使用 v-for 为输入添加标签 输入运行良好（我使用 v-for 创建它们并且它创建它们很好），但是当我尝试向它们添加标签时，表单变得一团糟

*Integration Params 是一个带有键和值的对象

这是输入创建：

<input v-for="(param,key,indeX) in integrationParams" v-model="integrationParams[key]" :ID="key">

这是标签创建：

<label class="inputLabel" v-for="(labelFor,indeX) in integrationParams" :for="key">Please fill in {{ key }} param</label>

例如，它实际上确实创建了 5 个标签，但结果如下：

解决方法

<div v-for="(param,key,indeX) in integrationParams" :key="key">
    <input v-model="param" :id="key">
    <label class="inputLabel" :for="key">Please fill in {{ key }} param</label>
</div>

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <div v-for="item in integrationParams" :key="item.message" >
<label> {{ item.message }} </label>
<input  v-model="item.message" :id="item">

</div>
</div>

new Vue({
  el: '#app',data: {
    message: 'Hello Vue.js!',integrationParams: [
      { message: 'Foo' },{ message: 'Bar' }
    ]
    
  }
})

大佬总结

以上是大佬教程为你收集整理的使用 v-for 为每个输入添加标签全部内容，希望文章能够帮你解决使用 v-for 为每个输入添加标签所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。