Create Vue.js component instance, on button click

Question

I'm pretty new with Vue and I am trying to add another input box (which I have as a separate component), when clicking on a button.

<div>
    <Input id="school" label="school" class="school-input" />
</div>

When clicking on a button, I want to add another input field.

<Button btn-text="add new school" type="btn-edit" @click="add()" />

But I don't know what should I put in the add() method (since the input box is a component, and not just a regular html input), so that when I click on the button, I get a new empty input box below the existing one.

Thanks for your help and references.

Actually I don't have much code. I'm just having the input as a separate component where I have: <input :id="id" :type="type" :placeholder="placeholder" :disabled="disabled" :value="value" @input="$emit('input', $event.target.value)" /> And I was using this as a reference: codepen.io/izobiz/pen/vgeWaY But I am really confused because here we are adding a new html element when clicking on the button, and I need to create an instance of the Input component... — Cassara
– Cassara, Commented Jul 26, 2020 at 16:01

Boussadjra Brahim · Accepted Answer · 2020-07-26 16:13:33Z

1

Add a data property called schools which is initialized as an array and iterate over it using v-for then bound each school to an Input :

Vue.component('Input', {
  props: ['value'],
  template: `<input  :value="value" @input="$emit('input', $event.target.value)" />`
})

let app = new Vue({
  el: '#app',
  data() {

    return {
      schools: [{
        name: ''
      }]
    }
  },

  methods: {
    add() {
      this.schools.push({
        name: ''
      })
    }
  }


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="add">add new Schoold
</button>
  <Input v-for='(school,index) in schools' v-model="schools[index].name"></Input>

  <h3>schools:</h3>
  <pre>{{schools}}</pre>
</div>

answered Jul 26, 2020 at 16:13

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Create Vue.js component instance, on button click

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