INITIAL PROBLEM
<template> <div class="post-box"> <span class="views">{{ views }}</span> <h3 class="title">{{title}}</h3> <span class="date">{{ date }}</span> <p class="content">{{ content }}</p> <div class="row"> <div class="col-sm-6 author"> <span class="post-author">{{author | uppercase }}</span> </div> <div class="col-sm-6 category"> <span class="post-category">{{category}}</span> </div> </div> </div>
</template>
createApp(App).use(store).use(router).mount("#app"); new Vue({ router, store, render: h => h(App) }).$mount("#app"); Vue.config.productionTip = false; Vue.filter('uppercase', function (v){ return v.toUpperCase() });
SOLUTION
REMOVE
new Vue({ router, store, render: h => h(App) }).$mount("#app"); Vue.config.productionTip = false; Vue.filter('uppercase', function (v){ return v.toUpperCase()
AND REPLACE
<template> ... <div class="col-sm-6 author"> <span class="post-author">{{ uppercase(author) }}</span> </div> ... </template> <script> export default { props: ['title','content','author','category','date','views'], name: "BlogPost", computed:{ uppercase(){ return (v)=>{ return v.toUpperCase() } } } }; </script> });