I recently created a 'read more' component using Vue Js, but encountered an issue where the component fails to re-render with new content when the text passed through props is changed.
Take a look at the code snippet for the component:
Vue.component('readmore', {
template:
`
<span>
{{ part1 }}<span v-if="leia.mais">...
<span class="text-info ml-2" style="cursor:pointer;" v-on:click="readMore"> Read More</span>
</span><span v-if="!leia.mais">{{ part2 }}
<span class="text-info ml-2" style="cursor:pointer;" v-if="leia.menos" v-on:click="readLess">Read Less</span>
</span>
</span>
`,
data: function () {
return {
part1: '',
part2: '',
leia: {},
defaultMaxChr: 200
}
},
props: ['maxchr', 'text'],
created: function () {
var text = this.text;
var maxchr = this.maxchr ? this.maxchr : this.defaultMaxChr;
if ((undefined === text) || (0 === text.length)) {
console.warn('READ MORE COMPONENT: Undefined text parameter or empty string passed.');
return;
}
if (text.length <= maxchr) {
this.part1 = text;
this.part2 = '';
this.leia = {mais: false, menos: false};
} else {
this.part1 = text.substr(0, maxchr);
this.part2 = text.substr(maxchr);
this.leia = {mais: true, menos: false};
}
},
methods: {
readMore: function()
{
this.leia.mais = false;
this.leia.menos = true;
},
readLess: function()
{
this.leia.mais = true;
this.leia.menos = false;
},
},
});
When I modify the input below, there seems to be no change in the output:
<readmore> and <input> are nested within another component, which assigns the text value in its data attribute.
<input v-model="text">
<readmore
v-bind:text="text"
v-bind:maxchr="100"
></readmore>