Vue JS insert and remove html elements dynamicaly

Question

I want some thing like this, If I hit "Add Another" button another set of input boxes should render below this set and this set's "Add Another" button should change to the "Remove This School" and the maximum number of input rows should limited to the 5.

I hope you understand my requirement.What I want is that the user can enter 5 schools or less than 5 schools.If he accidentally add some wrong information he should have a remove button to remove that record.How do I achieve this using Vue JS. This is my code.

<template>
  <div id="app">
    <p>Please enter the schools you attained (Maximum five)</p>
    School Name : <input type="text" name="" value="">
    Location  : <input type="text" name="" value="">
    <button type="button" name="button" @click="addAnotherInputBox">Add Another</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter:0

    }
  },
  methods:{
    addAnotherInputBox(){

    }
  }
}
</script>

Abd0m1nals · Accepted Answer · 2018-03-08 10:31:19Z

3

Here you go, although you should have filled the logic of your add button, but you can do that by your own

Here is a working fiddle: https://jsfiddle.net/Sletheren/Lo7t0myL/

<template>
  <div id="app">
    <p>Please enter the schools you attained (Maximum five)</p>
    School Name : <input v-model="name" type="text" name="" value="">
    Location  : <input v-model="location" type="text" name="" value="">
    <button type="button" name="button" @click="addAnotherInputBox">Add Another</button>
    <ul class="schools">
        <li v-for="school in schools">
            {{school.name}} <button @click="removeSchool(school)">remove</button>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter:0,
      name: '',
      location:'',
      schools: []
    }
  },
  methods:{
    addAnotherInputBox(){
        // your logic here...
       if(this.counter>4){
           alert('you should delete one first! only 5 allowed')
       }else{
            const school = {
                name: this.name, //name here
                location: this.location //location here
            }
            this.counter++;
            this.schools.push(school)
            this.name='';
            this.location=''
       }
    },
    removeSchool(school) {
        this.schools.splice(this.schools.indexOf(school),1);
        this.counter--;
    }
  }
}
</script>

edited Mar 8, 2018 at 10:31

answered Mar 8, 2018 at 10:17

Abd0m1nals

2,48615 silver badges27 bronze badges

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

1 Comment

margherita pizza Over a year ago

Thanks you a lot. I highly appreciate your answer. I learnt a lot from this. Thanks again. =)

Collectives™ on Stack Overflow

Vue JS insert and remove html elements dynamicaly

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

Related