vue2.x filters中如何调取computed中的属性，另外filters中的方法添加多个参数template里调用报错

Question

以下是demo

<script>
  export default {
    props: ['userList', 'sessionIndex', 'session', 'search'],
    filters: {
      selection (list, sear) {
        return list.filter(item => item.name.indexOf(sear) > -1)
      }
    }
  }
</script>

<template>
    <div class="m-list">
        <ul>
            <li v-for="item in userList | selection(search)" :class="{ active: session.userId === item.id }">
                <img class="avatar" width="30" height="30" :alt="item.name" :src="item.img">
                <p class="name">{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

console报错信息如下

Vue warn: Property or method "selection" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Error in render: "TypeError: _vm.selection is not a function"

TypeError: _vm.selection is not a function

Answer 1

filter 不会绑定 this，获取不到实例的，只能做简单的处理，你需要再写一个 computed 来做过滤，界面直接绑定过滤后的数据就好了。