CODEWITHSUNDEEP
vue.js
user8395584
user8395584

Reputation:

Adding a label to each input using v-for

I'm trying to add labels for inputs using v-for The inputs are working good(I'm creating them using v-for and it's creating them good), but When I'm trying to add labels to them the form becomes a big mess

*Integration Params is an object with key and value

This is the input creation:

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

This is the label creation:

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

It actually does create 5 labels for example, but it comes out like this:

form

Upvotes: 0

Views: 5917

Answers (2)

rassakra
rassakra

Reputation: 1121

this is you solution:

<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>

and the vue code:

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

Demo: enter image description here

Upvotes: 0

Bulent
Bulent

Reputation: 3411

You need to pair them inside a parent div

<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>

Upvotes: 1

Related Questions