Vue2用计算属性(computed)替代过滤器(filter)的问题

在Vue2里面一般处理文本比如时间格式化,文本替换等操作时,很容易想到使用filter,但是这有个问题,filter里面是没有this的,如果想使用到Vue实例只能换成computed或者method,比如下面这个例子:

<template>
	<view>
		<view v-for="(item,index) in list" :key="index">
			
				<Item :content="item.text | formatWord" />
			
				<Item :content="formatWord(item.text)" />
		view>
	view>
template>

<script>
	import Item from '@/components/item.vue'
	export default {
		components: { Item  },
		data() {
			return {
				word: 'd',
				list: [
					{ text: 'a' },
					{ text: 'b' },
					{ text: 'c' }
				]
			}
		},
		filters: {
			// 错误方法一: 这里会报错,因为filter里面this没有指向vm
			formatWord(text) {
				return text + this.word
			}
		},
		computed: {
			// 错误方法二: 这里也会出错,因为computed的第一个参数其实是vm
			formatWord(text) {
				return text + this.word
			}
		}
	}
script>

上面的例子的问题在于如果使用过滤器,那么拿不到this,如果使用计算属性那么第一个参数并不是上面的传参,所以下面有种解决方法,也就是使用计算属性,但是是返回一个函数,如下:

<template>
	<view>
		<view v-for="(item,index) in list" :key="index">
			<Item :content="formatWord(item.text)" />
		view>
	view>
template>

<script>
	import Item from '@/components/item.vue'
	export default {
		components: { Item  },
		data() {
			return {
				word: 'd',
				list: [
					{ text: 'a' },
					{ text: 'b' },
					{ text: 'c' }
				]
			}
		},
		computed: {
			formatWord() {
				return function(text) {
					// 这里的this是vm
					return text + this.word
				}
			}
		}
	}
script>

你可能感兴趣的:(一些坑)