Set custom varaible name in for loop Vue js

Question

Below is my code.This is not working because i want to make a dynamic key of object.

<li v-for="index in 6" :key="index"> 
    <div class="input-fld">
        <div class="field">
            <p class="control has-icons-right">
                <input type="text" v-model="formData[0].'line_'{{index}}'_text'"/> 
            </p>
        </div>
    </div>         
</li>

I want like this

<input class="input" type="text" v-model="formData[0].line_1_text"/>
<input class="input" type="text" v-model="formData[0].line_2_text"/>
<input class="input" type="text" v-model="formData[0].line_3_text"/>
<input class="input" type="text" v-model="formData[0].line_4_text"/>
<input class="input" type="text" v-model="formData[0].line_5_text"/>
<input class="input" type="text" v-model="formData[0].line_6_text"/>

Sergey Bogdanov · Accepted Answer · 2019-04-02 11:14:47Z

2

Try to set custom names by bracket notation:

<li v-for="index in 6" :key="index"> 
<div class="input-fld">
    <div class="field">
        <p class="control has-icons-right">
            <input type="text" v-model="formData[0]['line_' + index + '_text']"/> 
        </p>
    </div>
</div>

answered Apr 2, 2019 at 11:14

Sergey Bogdanov

6711 gold badge4 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Set custom varaible name in for loop Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related