Dynamic number of rows containing dynamic number of input fields vue

Question

I trying to create a form which would have a dynamic number of steps. An additional step can be added on click of a button. Inside that step, there are a couple of input fields but also few more buttons to create more input fields.

For example, there are the title and description inputs but also link to Add a Video which would create another input field and would change that link to Remove the Video.

All these steps have to create one array of objects where each object might contain slightly different properties. I'm new to vue and it's very confusing.

<div v-for="(row, index) in rows" :key="index">

<input type="text" v-model="row.title">
<input type="text" v-model="row.description">
<div v-show="row.video">
    <input type="text" v-model="row.video">
</div>
    <a v-on:click="addVideo(index);" style="cursor: pointer">Add Video element</a><br>

<a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
</div>
<div>
    <button class="button btn-primary" @click="addRow">Add Step</button>
</div>

and my functions:

addRow () {
  this.rows.push({
    title: '',
    description: '',
    file: {
      name: 'Choose File'
    }
  })
},
addVideo (index) {
  this.rows[index].video = ' '
  this.$forceUpdate()
},
removeElement (index) {
  this.rows.splice(index, 1)
}

or code at this link: http://jsbin.com/punekukayu/1/edit?html,js,output

At this point I don't know how could I remove the Add Video element link from that step and I suppose this is the bad practice approach here.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You could use v-if and v-else:

<a v-if="input.video === null" v-on:click="addVideo(index);" style="cursor: pointer">Add Video element</a>
<template v-else>
    <input type="text" v-model="input.video">
    <a v-on:click="removeVideo(index);" style="cursor: pointer">Remove Video element</a>
</template>

And you would add video as null by default, so you don't need to call $forceUpdate:

addRow() {
  this.inputs.push({
    one: '',
    two: '',
    video: null                     // added
  })
},
addVideo (index) {
  this.inputs[index].video = '';    // changed
},
removeVideo (index) {
  this.inputs[index].video = null;  // added
},

Updated JSBin here.

If I may suggest, you should pass each input directly to addVideo or removeVideo (instead of index). I think it makes the code simpler: http://jsbin.com/pucohawuje/1/edit?html,js,output - But I do understand this could be a matter of taste, so I'm leaving it just as suggestion.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 12, 2018 at 1:55

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

1 Comment

Žilvinas Over a year ago

Thanks! that's great tips

Collectives™ on Stack Overflow

Dynamic number of rows containing dynamic number of input fields vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest