Question

为什么过滤器不起作用？

错误说：[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>

Answer 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;
}

由于您要复制两次，但只是使用不同的值。

VueJS过滤器不起作用

1 个答案: