filters中的this问题，及在computed中调用函数

最新推荐文章于 2024-07-27 07:45:00 发布

转载最新推荐文章于 2024-07-27 07:45:00 发布 · 853 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/lyww1992/article/details/89517256

文章标签：

#vue

vue 专栏收录该内容

10 篇文章

订阅专栏

过滤器内是没有this引用的，过滤器内的this是undefined，所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。

尤大大的对这个过滤器filters的说明我才发现：vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。

<template>
  <ul>
    <li v-for = "(item, index) in arrs" v-bind:key = 'index'>
        <span>{{dataAmand(item.title)}}</span>
    </li>
  </ul>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        {title: '奥利维亚'},
        {title: '丽娜.因巴斯'},
        {title: '希尔瓦娜斯'}
      ]
    }
  },
  computed: {
    dataAmand () {
       return function (value) {
         return this.countNum(value, 4)
       }
    }
  },
  methods: {
    countNum (v, l) {
      return v.length > l ? v.substring(0, l) : v
    }
  }
}
</script>