Vue2 v-bind:href 中如何使用过滤器?

如题,我想在v-bind:href 中使用一个过滤器,获得组合后的href

<a class="topic_title" v-bind:href="info.id|getTitleHref" v-bind:title="info.title">{{info.title}}</a>

下面是Vue的代码

var vm = new Vue({
        el:'#topic_list',
        data:data,
        filters:{
            getTitleHref:function(val){
                return 'https://cnodejs.org/topic/' + val 
            }
        }
    })

然后一直报错
图片描述

请大神拯救

回答:

@orangexc @hjcc 感谢两位的帮助,问题已经解决,用methods,html写:href="getTitleHref(info.id )",就OK了

function pushDom(data){
    var vm = new Vue({
        el:'#topic_list',
        data:data,
        methods:{
            getTitleHref:function(val){
                return 'https://cnodejs.org/topic/'+val
            }
        }
    })
    
}

回答:

有三个问题建议你依次查下

  1. 你的 el:'#topic_list'所绑定的元素是否正确,我观察你的 class="topic_title",你取的是id

  2. 你可以这样写 <a :href="{{info.id | getTitleHref}}"></a>

  3. Filters have been replaced with computed properties in Vue 2.0.官方文档所述,你需要把filter 写在 computed 中,而不是 filters 里,

Vue 2.x 的过滤器只能在mustache绑定中使用。如果需要在指令绑定中实现相同的功能,请使用计算属性。

回答:

过滤函数放在methods里,computed好像不支持传值,一传我的就报错,computed也可以传值,不过需要set方法,

回答:

虽然楼主目的达到了,但是真的有 filter 需求可以这样使用:

v-bind:href="$options.filters.getTitleHref(info.id)"

如何在 v-html 中使用 filters#使用 $options.filters

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注