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

Question

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/

Use vue implementation for dropzone to make your life easier. github.com/rowanwins/vue-dropzone — Emīls Gulbis
– Emīls Gulbis, Commented May 24, 2019 at 12:27
Thanks for the jsfiddle example, I've updated my answer with a working vuejs example :) — Bergur
– Bergur, Commented May 24, 2019 at 14:59

Bergur · Accepted Answer · 2019-05-24 14:58:07Z

6

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.

We create a data property called inputs, that is an array.
We create a method called addInput and all that does is to push a new item into the inputs array
In the template we loop with v-for through our inputs array and render a input for each item in our inputs data property.
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.

edited May 24, 2019 at 14:58

answered May 24, 2019 at 10:36

Bergur

4,07714 silver badges21 bronze badges

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

3 Comments

Blu Ycw Over a year ago

Hi, i want to append the HTML input to the target at the same time bind the input to the v-model, not toggle it, thank you

Bergur Over a year ago

You don't have to toggle it, it's just an example of how to set up vue app that renders html on event.

Bergur Over a year ago

Can you explain to me what the success event is, is it an jquery ajax? Why is it in the data object? When fire that ajax request?

tony19 · Accepted Answer · 2022-07-14 23:57:59Z

1

If you want only one element to be appended to component, then you should use v-if https://v2.vuejs.org/v2/guide/conditional.html#v-if

If you want to append multiple elements, like todo list, you should use v-for https://v2.vuejs.org/v2/guide/#Conditionals-and-Loops

edited Jul 14, 2022 at 23:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 24, 2019 at 10:09

Emīls Gulbis

2,0701 gold badge12 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related