在vue2.x中使用filters功能,如果想在filter中使用this调用data中的数据,会报错,因为this不是指向vue组件实例。
如果想用data中的数据,一般有两种方式:
1.在使用filter时传入data中数据,如:
<template>
<div>
目前选择的是:{{ type | convertText(list) }}
</div>
</template>
<script>
export default {
filters: {
// 传进来list参数
convertText: function(value, list) {
let result = ''
list.forEach(item => {
if(item.value === value) {
result = item.label
}
})
return result
}
},
data() {
return {
list: [
{label: '苹果', value: 1},
{label: '香蕉', value: 2},
{label: '橘子', value: 3}
],
type: 1
}
}
}
</script>
2.将vue组件实例在created中赋值给全局变量,然后使用该变量,如:
<template>
<div>
目前选择的是:{{ type | convertText }}
</div>
</template>
<script>
let self = null
export default {
filters: {
convertText: function(value) {
let result = ''
// self指向vue组件实例
self.list.forEach(item => {
if(item.value === value) {
result = item.label
}
})
return result
}
},
data() {
return {
list: [
{label: '苹果', value: 1},
{label: '香蕉', value: 2},
{label: '橘子', value: 3}
],
type: 1
}
},
created() {
// 将this复制全局变量
self = this
}
}
</script>