How to dynamically append HTML element to component in Vue.js

Hmm I think you're mixing all kinds of code here :)

First off, you shouldn't use jquery inside VueJS. I think that your setup is a little off. You shouldn't define a whole object with functions and event listeners in your vue data object.

That's what Vue components are for, define methods in your methods property and data in you data property.

Thanks to your jsfiddle example, I have this pure vuejs example for you on codepen: https://codepen.io/bergur/pen/vwRJVx

VueJS code:

new Vue({
  el: '#demo',
  name: 'Adding html',
  data() {
    return {
      inputs: []
    }
  },
  methods: {
    addInput() {
      this.inputs.push(this.inputs.length+1)
    }
  },
  computed: {
    buttonText() {
      return this.showInput ? 'Hide input' : 'Show input'
    }
  }
})

HTML template

<div id="demo">
  <button @click="addInput">Add input</button>
  <div v-for="(input, index) in inputs">
    <input name="data" v-model="inputs[index]"  />
  </div>
  <p>
    First value: {{ inputs[0] }}<br />
    Second value: {{ inputs[1] }}
  </p>
</div>

Here's a walkthrough of the code.

1. We create a data property called inputs, that is an array.
2. We create a method called addInput and all that does is to push a new item into the inputs array
3. In the template we loop with v-for through our inputs array and render a input for each item in our inputs data property.
4. We then use v-model to bind each input to its corresponding place in the inputs array.

You can try to change the input value and see that the template updates the value.

So input[0] holds the value for the first input, input[1] holds the value for the second input and so on.