How to created dynamic/raw HTML with VueJS

Question

I would like to transform the span into a real element. When I try this way the appendChild gives me an error because the variable is a string and not and object. Any ideas?

export default{
    data(){
       ....
    }   
    methods:{
      update_period: function(event){
        var start = moment(event.start).format('M/D/Y'),
            end = moment(event.end).format('M/D/Y');
        
        var span = `<span @click="remove">{{ start }} - {{ end }}</span>`

        this.$refs.spans.appendChild(span);
      },
      remove: function(event){
        event.target.remove()
      }
    }
  }

<div ref="spans">

</div>

It's not 'dynamic HTML'. It's Vue template. In order to maintain reactivity, you'll likely need to compile the template and render nested Vue instance. Is there a reason why you're trying to do this with @click and not raw addEventListener? — Estus Flask
– Estus Flask, Commented Feb 20, 2020 at 17:03
I can use addEventListener without a problem, but there's a way to create the HTML element em 'realtime' and append to the div? — rtician
– rtician, Commented Feb 20, 2020 at 17:16
Not in any reasonable and conventional way, no. As for your case, <span v-for> all the way, as it's suggested below. — Estus Flask
– Estus Flask, Commented Feb 20, 2020 at 17:38

Fab · Accepted Answer · 2020-02-20 17:05:26Z

1

You can get the same result in this way:

<template>
    <div>
        <span @click="remove" v-if="period">{{ period }}</span>
    </div>
</template>
<script>
export default {

    data() {
        return {
            period: null,
        }
    },

    methods:{
        update_period(event) {
            this.period = moment(event.start).format('M/D/Y') + ' - ' + moment(event.end).format('M/D/Y')
        },
        remove() {
            this.period = null;
        }
    }

}
</script>

answered Feb 20, 2020 at 17:05

Fab

4,6672 gold badges26 silver badges47 bronze badges

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

3 Comments

rtician Over a year ago

Yeah, but I have a lot o "periods". I'm trying to solve in a way that I don't create a lot of v-ifs and variables to control them.

Fab Over a year ago

However, for sure there is a better way with Vuejs to achieve what you need. Using appendChild in a Vue component is not recommended. Maybe an array of object with each period and a v-for?

rtician Over a year ago

Indeed! It's a better way to use v-for with an array. Thanks.

Collectives™ on Stack Overflow

How to created dynamic/raw HTML with VueJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related