I've been working with Vue for a few days and have run into an issue.
I am using jQuery AJAX to load text content in the template, but I need to truncate the title and description with ellipsis. Here is the method I wrote:
methods:{
titleELLIPSIS:function(){
var title = self.articleList.title;//AJAX data
var titleLength = title.length;
var maxWidth = 15;
var newTitle = title.split("",maxWidth);
return title(function(ELLIPSIS){
if(titleLength>maxWidth){
for(var j=newTitle.length-1;j>0;j--){
delete newTitle[j];
var ELLIPSIS = self.innerHTML = newTitle.join('')+'...';
if(newTitle.length<=maxWidth){ break;}
return ELLIPSIS;
}
}
})
}
}
And here is my template:
<h2 class="ellipsis-2">{{titleELLIPSIS}}</h2>
How can I display the truncated title in an h2 element?
Please share some ideas with me.
Also, just to note, the AJAX call is successful as other data is displaying correctly.