CODEWITHSUNDEEP
javascriptvue.jsvue-component
Le garcon
Le garcon

Reputation: 8377

Is it possible to append a component on a button press?

Here's a problem that I want to solve: I have a button that when is pressed must append my-component to a dom. If it is pressed 2 times there must be 2 <p> tegs. How can I achieve this?

js:

<script>

  Vue.component('my-component', {
    template: "<p>hello</p>",
  })

  var vue = new Vue({
    el: "#App",
    data: {},
    methods: {
      append: function() {
         // unknown code here
      }
    }
  })
</script>

html:

<div id = "App">
  <button @click="append" class="btn btn-primary">Spawn stuff!</button>
</div>

Upvotes: 1

Views: 1004

Answers (1)

Bert
Bert

Reputation: 82439

Here is one way you could do that. This code iterates over a counter using v-for to iterate over a range.

Vue.component('my-component', {
  template: "<p>hello</p>",
})

var vue = new Vue({
  el: "#App",
  data: {
    hellocount: 0
  },
  methods: {
    append: function() {
      // unknown code here
      this.hellocount++
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="App">
  <my-component v-for="n in hellocount" :key="n"></my-component>

  <button @click="append" class="btn btn-primary">Spawn stuff!</button>
</div>

This is a little atypical; normally you will drive the components rendered from actual data, as @RoyJ suggests in your comments.

From your comment below, you could build a form something like this.

Vue.component('my-input', {
  props:["value", "name"],
  data(){
    return {
      internalValue: this.value
    }
  },
  methods:{
    onInput(){
      this.$emit('input', this.internalValue)
    }
  },
  template: `
    <div>
      {{name}}:<input type="text" v-model="internalValue" @input="onInput"> 
    </div>  
    `,
})

var vue = new Vue({
  el: "#App",
  data: {
    form:{
      name: null,
      email: null,
      phone: null
    }
  },
  methods:{
    append(){
      const el = prompt("What is the name of the new element?")
      this.$set(this.form, el, null)
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="App">
  <my-input v-for="(value, prop) in form" 
            :key="prop" 
            v-model="form[prop]" 
            :name="prop">
  </my-input>
  
  <button @click="append">Add New Form Element</button>
  <div>
  Form Values: {{form}}
  </div>
</div>

The code defines a form object and iterates over the properties of the form to render inputs for each property.

This is obviously extremely naive, handles only input texts, etc. But hopefully you get the idea.

Upvotes: 2

Related Questions