Adding a label to each input using v-for

Question

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:

Bulent · Accepted Answer · 2021-04-23 19:36:05Z

1

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>

answered Apr 23, 2021 at 19:36

Bulent

3,4411 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user8395584 Over a year ago

VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable. This is what I get :(

Bulent Over a year ago

try v-model="integrationParams[key]"

Ohgodwhy Over a year ago

@OsherRevach Then use the accessor of the object. v-model="integrationParams[key]". Something is writable, you're just not targeting the correct property.

rassakra · Accepted Answer · 2021-04-23 19:54:11Z

0

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:

answered Apr 23, 2021 at 19:54

rassakra

1,1217 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding a label to each input using v-for

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related