VueJS过滤器不工作

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

来源

2017-07-28 Kay Singian

大写的过滤器已Vue.js被删除2.

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

您可以简单地使用：

{{ text.toUpperCase() }}

至于你的代码的结构就像t一样他的方法可能更好：

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

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

来源

2017-07-28 07:27:03

VueJS过滤器不工作

回答

相关问题