admin管理员组

文章数量:1287579

I has worked with Vue for several days, and meet some problem.

I use jQuery AJAX load data (text content) in template, title and description need to be ellipsis, I wrote the methods ↓

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 my template is：

<h2 class="ellipsis-2">{{titleELLIPSIS}}</h2>

How could I return the ellipsis title in h2?

Please give me some idea.

By the way, the AJAX is success, because other data show correctly.

I has worked with Vue for several days, and meet some problem.

I use jQuery AJAX load data (text content) in template, title and description need to be ellipsis, I wrote the methods ↓

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 my template is：

<h2 class="ellipsis-2">{{titleELLIPSIS}}</h2>

How could I return the ellipsis title in h2?

Please give me some idea.

By the way, the AJAX is success, because other data show correctly.

  • javascript
  • vue.js
Share Improve this question edited Feb 18, 2018 at 19:19 marc_s 755k184 gold badges1.4k silver badges1.5k bronze badges asked Jan 24, 2018 at 6:38 linlin 2212 gold badges3 silver badges14 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

Computed property is what you're looking for. Move titleEllipsis to puted section:

puted: {
   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;
                }
            }
        })

    }
}

titleELLIPSIS is defined as a method, therefore you need to actually call it.

<h2 class="ellipsis-2">{{ titleELLIPSIS() }}</h2>

The way you are using it is like it's defined as a data or puted property.

本文标签： javascriptHow could I return value with VuejsStack Overflow

版权声明：本文标题：javascript - How could I return value with Vue.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741297640a2370908.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。