CODEWITHSUNDEEP
javascriptvue.jsvuejs2
rtician
rtician

Reputation: 15

How to created dynamic/raw HTML with VueJS

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>

Upvotes: 0

Views: 273

Answers (1)

Fab
Fab

Reputation: 4657

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>

Upvotes: 1

Related Questions