[FIXED] How to dynamically append HTML element to component in Vue.js

Issue

I'm new to vue.js, before this i'm using jquery or js for my project, i'm working on a project that require me to append HTML element dynamically on button click, and at the same time bind the input value to model, similar to:

$(".button").click(function() {
 $("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});

But i need this in Vue.js ways.

Here is my code:

data() {
    return {
      programmeBanner: [],
      dropzoneOptions: {
        ...
        ...
        init: function () {
          this.on("success", function(file, response) {
            file.previewElement.id = response;

            // this is the part that i want to append the html input into
            // the .dz-preview is the target that i want to append 
            $(".dz-preview[id='"+response+"']").append("<input type='hidden' name='"+fileInputName+"[]' v-model='programmeBanner' class='"+fileInputName+"' value='"+response+"'/>");
          });
        },
        ...

Here is a sample that i want to achieve, this is in Jquery, i need it in Vue.js

https://jsfiddle.net/041xnfzu/

Solution

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.

Answered By - Bergur

Answer Checked By - Willingham (PHPFixing Volunteer)