VueJS过滤器不起作用答案

【问题标题】：VueJS Filter Not WorkingVueJS过滤器不起作用
【发布时间】：2018-01-04 03:37:31
【问题描述】：

为什么过滤器不起作用？

错误提示：[Vue 警告]：无法解析过滤器：大写。

不知道为什么，但过滤器不起作用。另外，这是编写此功能的最佳方式吗？有没有办法做到这一点，或建议的方式？我不确定是否使用 $refs，也许我可以更简单地做到这一点，但有效地使用可重用组件。

我正在尝试通过使用随机消息和状态来模拟 Ajax 响应。

链接：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>

【问题讨论】：

Filter with VueJS的可能重复

标签： vue.js

【解决方案1】：

Vue.js 2 中删除了大写过滤器。

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

你可以简单地使用：

{{ text.toUpperCase() }}

就你的代码结构而言，这样的方法可能会更好：

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

因为您将它复制了两次，但只是使用了不同的值。

【讨论】：