Dynamique des éléments html dans Vue.js

Comment est-il possible d'ajouter des éléments de façon dynamique le contenu? L'exemple ci-dessous:

<template>
    {{{ message | hashTags }}}
</template>

<script>
    export default {
        ...

        filters: {
            hashTags: function(value) {
                //Replace hash tags with links
                return value.replace(/#(\S*)/g, '<a v-on:click="someAction()">#$1</a>')
            }
        }
    }
</script>

Problème est que si je clique sur le lien, aucune action du feu. Vue de ne pas voir de nouveaux éléments.

OriginalL'auteur user2058653 | 2016-09-15

  1. 0

    Depuis partial a été retiré de VueJS 2 (https://vuejs.org/v2/guide/migration.html#Vue-partial-removed)

    Une meilleure façon peut-être de créer un composant qui traite de son contenu et de créer les éléments du DOM

    Au-dessus de la composante sera de remplacer les mots par des liens cliquables

    <process-text>Hi #hashtag !</process-text>
    Vue.component('process-text', {
    render: function (createElement) {
        var hashtagRegex = /(^|\W)(#[a-z\d][\w-]*)/ig
        var text = this.$slots.default[0].text
        var list = text.split(hashtagRegex)
        var children = []
        for (var i = 0; i < list.length; i++) {
            var element = list[i]
            if (element.match(hashtagRegex)) {
                children.push(createElement('a', {
                attrs: {
                    href: 'https://www.google.fr/search?q=' + element,
                    target: "_blank"
                    },
                domProps: {
                    innerHTML: element
                    }
                }))
            } else {
                children.push(element)
            }
        }
    }
    return createElement('p', {}, children)  //VueJS expects root element
})

    OriginalL'auteur Richard