一、问题描述
导致错误的代码:
......
<template v-if="operateName | filterOperateName">
<p class="enable_font">
<i class="el-icon-info enable-icon"></i>
<span
>确定要
<em class="operate_font">{{ operateName }}</em>
选中数据吗?</span
>
</p>
</template>
......
<script>
export default {
data() {
return {
operateName:"" // operateName会在其他地方被更改
}
},
filters: {
filterOperateName(name) {
const names = ["启用", "禁用", "删除"];
return names.includes(name) ? true : false;
}
}
}
</script>
报错如下:
Property or method "filterOperateName" is not defined on the instance but referenced during render. Make sure that this property is reactive
二、解决办法
将v-if中的内容改为方法,不直接用vue的filters:
1. 将v-if的内容改为:v-if="filterOperateName(operateName )"
2. 将刚刚的filters
中的内容放到methods
中即可
......
<template v-if="filterOperateName(operateName )">
<p class="enable_font">
<i class="el-icon-info enable-icon"></i>
<span
>确定要
<em class="operate_font">{{ operateName }}</em>
选中数据吗?</span
>
</p>
</template>
......
<script>
export default {
data() {
return {
operateName:"" // operateName会在其他地方被更改
}
},
methods: {
filterOperateName(name) {
const names = ["启用", "禁用", "删除"];
return names.includes(name) ? true : false;
}
}
}
</script>
我这是用在弹窗中的,如图: