javascript - error Filters are deprecated how to solve this error in vue.js 3 - Stack Overflow

admin管理员组

文章数量:1287880

i'm trying to use filter in vue.js 3 to filter data into upper case but this error show when any filter?!! i tried lot of solutions but no way

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()
    });

ponent that i use filter:

<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>

could u help me

i'm trying to use filter in vue.js 3 to filter data into upper case but this error show when any filter?!! i tried lot of solutions but no way

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()
    });

ponent that i use filter:

<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>

could u help me

• javascript
• vue.js
• vuejs3

Share Improve this question Follow edited Jun 11, 2021 at 20:35 Boussadjra Brahim 1 asked Jun 11, 2021 at 20:18 Mahmoud DiabMahmoud Diab 55122 gold badges77 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The solution is to use a puted property instead of filters which are remove in vue 3 : in main.js remove import Vue from 'vue' and :

new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount("#app");
    
    Vue.config.productionTip = false;
    
    Vue.filter('uppercase', function (v){
       return v.toUpperCase()
    });

In the child ponent define that property and use it inside the template as follows :

<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",
      puted:{
         uppercase(){
            return (v)=>{
              return v.toUpperCase()
              }
           }
     }
    };
    </script>

本文标签： javascripterror Filters are deprecated how to solve this error in vuejs 3Stack Overflow