vue.js - VueJS Filter Not Working -


why filter not work?

error says: [vue warn]: failed resolve filter: uppercase.

not sure why filter not working. also, best way code functionality? there ways this, or suggested ways? i'm not sure using $refs, maybe can simpler, effective use of reusable components.

i'm trying emulate ajax response using random message , status instead.

link: 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>

the uppercase filter has been removed in vue.js 2.

https://vuejs.org/v2/guide/migration.html#built-in-text-filters-removed

you can use:

{{ text.touppercase() }}

as far structure of code goes, better off in method:

close: function() {   this.alerttype= null;   this.title= null;   this.message= null;   this.showalert= false; }

since duplicating twice different values.


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more