JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <textarea v-model="string"></textarea>
  <template v-for="node, n in nodes">
    <demo-link v-if="n % 2" :to="node"></demo-link>
    <template v-else>{{node}}</template>
  </template>
</div>

CSS

textarea{
   width:100%;
   height:100px;
}

JavaScript

Vue.component('demo-link', {
	props:['to'],
  template:`<a :href="'#' + to" @click="alert">{{to}}</a>`,
  methods:{
  	alert(){
    	alert(this.to)
    }
  }
})
new Vue({
  el: '#vue',
  data: {
    string: `Today's #weather is #very nice`
  },
  computed: {
    nodes() {
      return this.string.split(/#[\w]+/)
    }
  }
})