I have a list of words, such as:
["Foo","Bar"]
When presented with a string, I'd like to dynamically replace words found in the list with components. Given a string like this:
"Foo lorem ipsum dolor Bar."
The result would be:
<MyComponent :text="Foo"/> lorem ipsum dolor <MyComponent :text="Bar"/>.
What's the best way to achieve this?
Here's my approach:
Vue.component('my-component', {
props: ['word'],
template: '<span class="my-component">{{word}}</span>'
})
new Vue({
el: '#app',
data() {
return {
text: 'Foo is the new Bar.',
filters: new Set(['Foo', 'Bar'])
}
},
computed: {
tokens() {
return this.text.match(/(?:\b|^).+?(?:\b|$)/g)
}
}
}).my-component {
color: #0095ff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="token in tokens">
<my-component v-if="filters.has(token)" :word="token"></my-component>
<template v-else>{{ token }}</template>
</template>
</div>The idea is quite straightforward:
This will do literally what you want :)
NOTE: the use of template helps having a clean HTML output, without useless div or span elements.
string.includes and remove any substring that has already been processed?I think v-for is the only thing needed for this.
Vue.component('mycomponent', {
props: ['word'],
template: '<div> Word is {{word}} </div>'
})
var vm = new Vue({
el: '#app',
data: function(){
return{
text: 'Foo lorem ipsum dolor Bar',
selectedWords: ['Foo', 'Bar']
}
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app" >
<div v-for="item in text.split(' ')">
<div v-if="selectedWords.includes(item)">
<mycomponent
:key="item"
:word="item">
</mycomponent>
</div>
<div v-else>
{{item}}
</div>
</div>
</div>I've passed word as a prop to mycomponent. Then used the shorthand for v-bind: which is : to bind item to word
Disclaimer: I also am learning Vue XD
