I am currently working on creating a form that can have a variable number of steps. Users should be able to add an additional step by clicking a button. Each step will contain some input fields and buttons to dynamically create more input fields.
For instance, there could be input fields for 'title' and 'description', along with a link to 'Add a Video' which, when clicked, would generate another input field and change the link to 'Remove the Video'.
All these steps need to contribute to creating an array of objects where each object may have slightly different properties. As someone new to vue, this process is quite bewildering for me.
<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>
Here are the functions associated with my code:
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)
}
You can find the code snippet at this link: http://jsbin.com/punekukayu/1/edit?html,js,output
Currently, I am struggling with figuring out how to effectively remove the 'Add Video element' link from a step, as I suspect my approach might not be ideal.