为什么过滤器不起作用？
错误提示:[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">×</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>
最佳答案
大写过滤器已在 Vue.js 2 中删除。
https://v2.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;
}
因为您要复制它两次，但只是使用不同的值。
关于vue.js - VueJS 过滤器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45367185/