error过滤器不赞成如何在vue.js 3中解决此错误

Question

我试图在vue.js 3中使用filter将数据过滤成大写，但当有任何过滤器时，就会显示此错误？！！我尝试了很多解决方案，但没有办法

main.js:

import Vue from "vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";
createApp(App).use(store).use(router).mount("#app");
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

Vue.config.productionTip = false;

Vue.filter('uppercase', function (v){
return v.toUpperCase()
});

我使用过滤器的组件：

<template>
<div class="post-box">
<span class="views">{{ views }}</span>
<h3 class="title">{{title}}</h3>
<span class="date">{{ date }}</span>
<p class="content">{{ content }}</p>
<div class="row">
<div class="col-sm-6 author">
<span class="post-author">{{author | uppercase }}</span>
</div>
<div class="col-sm-6 category">
<span class="post-category">{{category}}</span>
</div>
</div>
</div>
</template>

<script>
export default {
props: ['title','content','author','category','date','views'],
name: "BlogPost",
};
</script>

你能帮我吗

Answer 1

解决方案是使用计算属性，而不是在vue 3中删除的过滤器：在main.js中删除import Vue from 'vue'和：

new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");

Vue.config.productionTip = false;

Vue.filter('uppercase', function (v){
return v.toUpperCase()
});

在子组件中，定义该属性并在模板中使用，如下所示：

<template>
...
<div class="col-sm-6 author">
<span class="post-author">{{ uppercase(author) }}</span>
</div>
...
</template>

<script>
export default {
props: ['title','content','author','category','date','views'],
name: "BlogPost",
computed:{
uppercase(){
return (v)=>{
return v.toUpperCase()
}
}
}
};
</script>