Как создать динамический / raw HTML с VueJS

Question

Я бы хотел превратить span в реальный элемент. Когда я пытаюсь таким образом, appendChild выдает мне ошибку, потому что переменная является строкой, а не объектом. Есть идеи?

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>

Answer 1

Вы можете получить тот же результат следующим образом:

<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>