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

Question

如题，我想在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 
            }
        }
    })

然后一直报错

请大神拯救

Answer 1

@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
            }
        }
    })
    
}

Answer 2

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

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绑定中使用。如果需要在指令绑定中实现相同的功能，请使用计算属性。

Answer 3

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

Answer 4

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

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

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