VueJS Filter Not Working

Question

Why does filter do not work?

Error says: [Vue warn]: Failed to resolve filter: uppercase.

Not sure why but filter is not working. Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.

I'm trying to emulate an Ajax Response by using random message and status instead.

Link: JSBIN

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">  
    <login-alert ref="refalert"></login-alert>
    <p>
      <button @click="showme">Random Alert</button>
    </p>
  </div>
    <script src=" https://unpkg.com/vue"></script>
    <template id="template-alert">
  <div v-if="showAlert">
    <div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">&times;</button>
      <h4>{{title|uppercase}}!</h4>
      {{message}}
    </div>
  </div>
  </template>
  <script>
    Vue.component('login-alert', {
      template: '#template-alert',
      data: function() {
        return {
          alertType : null,
          title : null,
          message : null,
          showAlert : false
        }
      },
      methods: {
        close: function() {
          this.alertType= null;
          this.title= null;
          this.message= null;
          this.showAlert= false;
        },
        open: function(type, message) {
          this.alertType= type;
          this.title = type;
          this.message= message;
          this.showAlert= true;
        }
      }
    });

    var app = new Vue({
      el: '#app',
      methods: {
        showme: function() {
          var randomStatus = ['error', 'warning', 'success'];
          var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo'];
          var status = randomStatus[Math.floor(Math.random() * randomStatus.length)];
          var message = randomMessage[Math.floor(Math.random() * randomMessage.length)];
          this.$refs.refalert.open(status,message);
        }
      }
    });
  </script>
</body>
</html>

Possible duplicate of Filter with VueJS

gpro
– gpro

2019-03-20 11:37:04 +00:00
Commented Mar 20, 2019 at 11:37 — gpro
– gpro, Commented Mar 20, 2019 at 11:37

tony19 · Accepted Answer · 2022-07-15 02:48:45Z

4

The uppercase filter has been removed in Vue.js 2.

https://v2.vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed

You can simply use:

{{ text.toUpperCase() }}

As far as the structure of your code goes, something like this is probably better off in a method:

close: function() {
  this.alertType= null;
  this.title= null;
  this.message= null;
  this.showAlert= false;
}

Since you are duplicating it twice but just with different values.

edited Jul 15, 2022 at 2:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 28, 2017 at 7:27

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS Filter Not Working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related