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過濾器不工作

回答

相關問題