Software
VueJS Filter Not Working
Why does filter do not work?
Error says: [Vue warn]: Failed to resolve filter: uppercase.
Not sure why but filter is not working. Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.
I'm trying to emulate an Ajax Response by using random message and 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">×</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 component image blank
I've bound a computed property to the src of an image tag in Vue.js. The code appears to correct, but does not work consistently which is baffling to me. Additionally, switching to the /about page and back to the main books page always properly displays the images.
Any information as to what could be causing this issue would be wonderful!
A hosted version of the app is available here: https://books.surge.sh/
The relevant code for the book-item component.
The code generating the book component and image src is as follows:
<template> <article class="book-item"> <img :src="imgSrc" class="image"> <div class="meta"> <div class="name">{{ book.title }}</div>* <div class="author">{{ book.author }}</div> </div> <div class="description"> <p v-html="book.description"></p> </div> </article> </template> <script> export default { props: ['book'], computed: { imgSrc() { return `/static/img/${this.book.image}`; } } }; </script>Partially displayed book covers on initial load:
Passing dynamic styles to my element in VueJS
I am trying to make a type of progress bar to track a percentage of tasks completed. I want to v-bind:styles and pass it {width: dynamicWidth + '%'} in order to control the progression of this bar. So far I have created a computed variable that will return the percentage complete I want to bar to display, and I have set up my dynamic style in the data object
export default{ data: function () { return { numQuotes: dataBus.numQuotes, numberA: 30, barWidth: { width: this.barWidthCalculated +'%' } } }, computed: { barWidthCalculated: function(){ return this.numQuotes * 10; } } }I also added an element to the DOM to see what was happening.
<div id="trackerBar"> <div id="trackerBarActual" v-bind:style="barWidth"> <h2>{{numQuotes}}/10</h2> <p>{{barWidthCalculated}}</p> </div> </div>My bar stays fixed at 100%, i dont see any interpolation on the DOM. I also established another NUMBER variable in my data section and attempted to pass that to my width property, but still no change, and no rendering on the DOM. However if I pass any other elements in my styles object such as
color: 'red'Those changes take place. Also if I pass my styles object a number directly ie...
barWidth: { width: 50 +'%' }It displays correctly on the DOM.
What am I missing/doing wrong?
Nesting custom tags in Vue
I have a Laravel / Vue app that I'm building and I've run into a bit of a snag. I have been able to successfully create individual stand-alone components, however when I try to nest a stand-alone component into another component, only the nested component shows up. A bit of code:
CompanyLogo.vue
<template> <figure class="company-logo" :style="{ width: size, height: size, backgroundImage: `url(${src})` }"></figure> </template>LogoUploader.vue
<template> <div class="logo-container"> <company-logo size="65px" :src="`${company.logo.url}`"></company-logo> </div> <div class="logo-uploaded-details"> <p>Last updated: {company.logo.last_updated}</p> <button class="file-browse-btn">Upload Image</button> </div> </template>What's happening is that when in company.blade.php I simply have
<logo-uploader></logo-uploader>The app compiles and loads, however only the CompanyLogo shows up on the screen. The entire markup for the logo-uploaded-details section isn't rendered at all.
I have tried adding a require for the CompanyLogo component to the registration for the LogoUploader component, but that didn't work either.
If I split out the components they both show up. The issue is only once they're nested.
Any ideas?
Can I run VueJS and NodeJS or related apps on Server that doesn't have NodeJS installed?
So I'm new to Vuejs and doesn't know anything about npm, node, and other javascript apps.
I wanted to switch to VueJS so that I can take away from JQuery. Been using AdminLTE for my projects before.
I wanted to use vue-admin now since it seems to address all of my needs. However, I have specific work area situations that seems to hinder learning Vue and other JS apps, these are:
- The workspace folder (development) where I'm creating applications is hosted in the production server (Windows Server).
- I think NodeJS isn't installed in the server
- Adobe Coldfusion is used. I don't have a local server, so the production server is used when developing.
Question:
- Will the production server run the app built with vue-admin even if the production server doesn't have NodeJS installed? (I have NodeJS locally).
- I need to use Coldfusion for the logic of the application, specifically I'm using CFWheels right now and vue-admin for Frontend and UX. Is it possible? The application I'm making is closely related to parts of an ERP system.
- Any pointers on how I could do this?
How to store and access data on eventBus in VueJS
Basically I want to be able to access some centralized data by setting up a dataBus as a vue instance object, and then access and tweak this data from different components.
I cant seems to access by data from my componenets, even basic string interpolation is not getting rendered to the DOM.
export const dataBus = new Vue({ data: { numQuotes: 4, stringVar: 'Hellow There' } });I also tried setting up my data as the return of the function data(). But being as my data bus is an actual vue instance I don't think this is correct. (I could be wrong). Following is the component in which I import my dataBus and try to output my data.
<template> <div> <h1>Quotes Added</h1> <div id="trackerBar"> <div id="trackerBarActual"> <h2>{{numQuotes}}/10</h2> </div> </div> </div> </template> <script> import { dataBus } from '../main.js'; export default{ } </script>I am getting the following error: Property or method "numQuotes" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Am I missing something obvious? Is it even possible to access data this way? Or do I have to access it as a method?
Vue is not detected when JSP is loaded through struts
Example JSP :
<!DOCTYPE html> <html lang="en-US" > <head> <script src="vue.min.js"></script> </head> <body> Sample heading <div class="container" id="mainDiv"> {{firstName}} </div> </body> <script type="text/javascript"> Vue.config.devtools = true; var app = new Vue({ el: '#mainDiv', data: { firstName: 'name', lastName: 'lName', description: 'desc' } }); </script> </html>The following options are tried :
- If the above file is executed using .html, it works as expected. Chrome Dev tools detects that its a Vue application
- If the above file is executed using .jsp, it works as expected. Chrome Dev tools detects that its a Vue application(http://localhost:8080/example.jsp)
- If the above file is executed using .jsp and the jsp is loaded through form submission like http://localhost:8080/example.do and the success is redirected to example.jsp, it doesn't work.
Output in case 1 and 2 :
Sample heading
name
Output in case 3 :
Sample heading.
- Ideally its supposed to display "name" as well.
- If we do inspect element, it shows "".
- In inspect element, If I select "app.firstName" I am able to see the value "name"
- lets say, if I add "", Vue is still unable to display component's template. If I do app.$ref -- {} in case 3 and app.$ref -- {container:...} in case 1 and 2
Has anyone tried similar scenarios ? I was wondering what exactly is making Vue to not load this data.
Any help in resolving this issue is appreciated.
Thanks in advance
vuejs component array push watcher
confusing title, I wasn't sure how else to write it. So i have a component and it accepts a prop which is an array. What i am looking to do, is on array.push() i would like a function to trigger for that array element.
so it is an alert toast message, and i want it to stay up for 3 seconds. so i was thinking about something like
watch: { arrayObj: function () { let self = this setTimeout(function() { self.dismiss(this.id) }, 3000) } }but i think i may be missing something here. How do i get the latest pushed object's reference so i make sure the dismiss method calls the correct alert? Is watch even the correct way to go about this?
Vue $el is undefined when testing with Mocha/Chai under meteor
I'm starting our unit test environment for our project, but we may have picked a combo that doesn't work well in a couple scenarios.
Our project runs under Meteor, the code for the UI is written in Vue and Coffeescript. The test environment we're trying to work with is Mocha & Chai. When I run the test suite, the command looks like this:
meteor test --once --driver-package=dispatch:mochaFrom the examples around the internet, the following code should work:
const VueObject = Vue.extend(MyVueComponent); const VueInstance = new VueObject().$mount(); chai.assert.ok(VueInstance.$el.textContent);From that point, I could ask $el all sorts of questions for my test, however $el is undefined. I even tried waiting by using Vue.nextTick() and it's still undefined. In the examples I've found, they often talk about using webpack, but I heard meteor doesn't like using webpack.
Does anyone have any suggestions? Did we pick a hard combination to work with?
How to pass props to a vue component when it is instanciated?
I'm building a TabbedDetailView reusable component in vue. The idea is that the tab-detail component receives a list of objects which have a title and a component. It then does the logic so that when you click on a tab, then the component is loaded. The problem is that this components have a prop that is a user_id. How do I insert this prop into the components from outside of the template? For example (using single file vue components):
SomeComponent.vue
import Vue from 'vue'; import Component1 from '@/components/Component1'; const Componenet1Constructor = Vue.extend(Component1); export default { data() { return { tabs: [ {title: 'Componenent 1', detail: new Component1Constructor({propsData: {user_id: this.user_id}})} {title: 'Component 2', detail: Component2}, {title: 'Component 3', detail: Component3}, ], }; }, props: ['user_id'], } <template> <div> <tab-detail :tabs='tabs'></tab-detail> </div> </template> Component1.vue
export default { props: ['user_id'], }; <template> {{ user_id }} </template>
Running the above throws the error: [Vue warn]: Failed to mount component: template or render function not defined.
Rails Vuejs Webpacker: Passing instance variable data
I am trying to learn how to build an app with Rails 5.1 with Vuejs, as generated via the Webpacker gem.
$ rails new myvueapp --webpack=vueHow do I pass instance variable data back an forth between the Vue components, to get my data in/out of the database?
Let's say for example that I have a User model with Username and Email fields. Is there a simple example of how to pass instance variable, @user, data from the controller to a component?
I believe there are two ways to do this:
(1) In the controller, has the render :json => @user and then use something like the fetch API or Axios to retrieve the data in the .vue component.
-or-
(2) Use the something like the example <%= javascript_pack_tag 'hello_vue' %> together with a <%= content_tag ... %> in a view.
When I do this <%= javascript_pack_tag 'hello_vue' %> example, I can see the "Hello Vue!" from the data in the component "message" variable, but am having trouble finding an example of instance variable data, eg: @user data, being passed in and out of Rails.
Any examples of how to pass @user data would be much appreciated.
Thank you.
Laravel 5.4 + vue2 click Event Handling not working
I have problem with Event Handling in vue2 with Laravel 5.4 - nothing happen when i use click event on the button. No error or anything else.
My html (in fact its header.blade.php):
<div id="example"> <button v-on:click="exclick">Super btn</button> </div>My js (app.js in resources/assets folder)
require('./bootstrap'); new Vue({ el: '#example', methods: { exclick: function (event) { alert("Log 1"); if (event) { alert("Log 2"); } } } }); const app = new Vue({ el: '#app' });JS compiled by gulp
Please help!
Should I be seeing hundreds of nested calls in DevTools flame charts, when I'm supposedly pre-compiling all of my Vue components?
I assumed that by refactoring all of the components in this large application into single-file Vue components, and using Webpack with Vue production runtime only, I could eliminate these deep call stacks of hundreds of nested calls that appear to be assembling a virtual DOM. It takes about 1500ms for all the scripting. If I comment out the reference to the root element (i.e. it doesn't bind), the scripting takes about 300ms. This seems expensive. The 'array' is by far the biggest part of the heap profile. Am I actually successfully pre-compiling?
Rails 5.1+ Vuejs Webpacker: Normal Rails MVC vs Rails API
I am starting a new app using Rails 5.1 and Vue.js, with the built-in Webpacker Vue.js pack (generated via the --webpack=vue flag).
I am trying to understand the pros & cons of using a normal Rails MVC app vs a Rails API app (generating a Rails app with the --api flag).
$ rails new someapp --webpack=vue vs. $ rails new someapp --api --webpack=vueGiven the fact that Rails API has been merged into core since 2015, and built-in Webpack via the Webpacker gem is brand new (Rails 5.1, 2017), what would be the best way to build a Rails app, where the frontend is going to be Vuejs? Or, mostly Vuejs?
Stick to regular Rails with Webpacker Vue, or Rails API with Webpacker Vue? And what are the tradeoffs?
Some of this answer will simply come down to a conversation about full-stack MVC apps vs SPA apps with API. However, are there any specific Rails Way +Vue.js components workflow things I should consider, beyond the "this is a question of an fullstack MVC app vs. a SPA app."
I want to note that I realize that the answers are going to be somewhat stylistic preference. Some might prefer one over the other.
Both will work, but I would like to think about ease of use, compatibility and trade-offs of doing it one way verse the other.
Thank you.
Vue component css being overwriten by bootstrapp-sass on Laravel
I have a almost vanilla instalation of Laravel.
No matter what i do, all my scoped css inside the component is simply ignored and bootstrap-sass styles are applied instead.
How can i stop this from rappening?
Issue calling Vue Method via Vue Computed
I believe this issue is related to JS in general as opposed to VueJS. But I have the following Vue Method that returns a Firebase Call and returns the object asked for. This is working:
methods: { getSponsor (key) { db.ref('businesses').child(key).on('value', snap => { console.log(snap.val()) return snap.val() }) } }[Object]
Now, when I call this method from a computed property, it results in undefined:
computed: { sponsor () { console.log(this.getSponsor(key)) return(this.getSponsor(key)) } }Undefined
Why is this? Is it because of how I return my method?
Where To Place Firebase's OnAuthStateChanged-Method In A VueJS-Application?
I'd like to trigger the onAuthStateChanged-method of Firebase in my VueJS-Application.
Currently I am not able to stay logged in as a certain user, the onAuthStateChanged-method seems not to run.
my action is kicked off by ...
beforeCreate() { this.$store.dispatch('update_session') }... in my main App-Component.
the mutation looks like:
update_session(state) { auth.onAuthStateChanged().then((user) => { if (user) { // USE USER KEY state.user.current.key = user.uid // USE USER ROLE users.child(state.user.current.key).on('value', (snapshot) => { state.user.current.role = snapshot.val().role }) } }) }Echo.private laravel 5.4 not work
i working for real-time notification .
notification send but not real-time
i need to refresh page to enable receive
<script> import NotificationItem from './NotificationItem.vue'; export default { props: ['unreads', 'userid'], components: {NotificationItem}, data(){ return { unreadNotifications: this.unreads, } }, methods: { markNotificationAsRead() { if (this.unreadNotifications.length) { axios.get('markAsRead'); } } }, mounted() { console.log('Component mounted.'); Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(asd); let newUnreadNotifications = {data: {thread: notification.thread, user: notification.user}}; this.unreadNotifications.push(newUnreadNotifications); }); } } </script> <template> <li class="dropdown" @click="markNotificationAsRead"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-globe"></span> Notifications <span class="badge alert-danger">{{unreadNotifications.length}}</span> </a> <ul class="dropdown-menu" role="menu"> <li> <notification-item :key="unread.id" v-for="unread in unreadNotifications" :unread="unread"></notification-item> </li> </ul> </li> </template>
script execute all but the following code not work
Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(asd); let newUnreadNotifications = {data: {thread: notification.thread, user: notification.user}}; this.unreadNotifications.push(newUnreadNotifications); });
anyone can help plz ? i searched alot but not found solution ??
How should i include css files in .vue files?
I'm using official vue-cli scaffolder and trying to include normalize.css in App.vue this way
<style scoped> @import "/node_modules/normalize.css/normalize.css"; .app { font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; max-width: 1000px; margin: auto; font-size: 16px; display: flex; align-items: center; justify-content: center; min-height: 100vh; } </style>But after compiling css doesn't include in style tag or as external file:
So, how can I correctly include this or another css file?
The worlds simplest vue.js/vuefire/firebase app. But can't read value
Vue.js is a bit of a life style change for a sql programmer, but getting there. Here I use vuefire as per specs, even manually inserting the correct key from my one record, one field Firebase DB to test it out. Yet see nothing returned or displayed.
Love to know how to do that! And fill in my one value form. From there the sky's the limit I'm sure. Thanks for any help.
ERROR MESSAGE: vue.common.js?e881:481 [Vue warn]: Error in mounted hook: "ReferenceError: residentsArray is not defined"
<template> <div class="edit"> <div class="container"> <p style="margin-bottom:10px;font-weight:800;">EDIT RECORD</p><br> <form id="form" v-on:submit.prevent="updateResident"> <fieldset class="form-group"> <label for="first_name">Name</label> <input type="text" class="form-control" id="first_name" name="first_name" v-model="currentResident.name"> </fieldset> <input type="submit" class="btn btn-primary" value="Add New Resident"> </form> </div> </div> </template> <script> import firebase from 'firebase' let editConfig = { apiKey: "123456789", authDomain: "myapp.firebaseapp.com", databaseURL: "https://myapp.firebaseio.com", projectId: "my", storageBucket: "myapp.appspot.com", messagingSenderId: "1234567890" }; var firebaseApp = firebase.initializeApp(editConfig, "Edit") var db = firebaseApp.database() let residentsReference = db.ref('residents') export default { name: 'Edit', mounted() { this.currentResident.name = residentsArray.name; }, firebase: { residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0') }, data () { return { currentResident: { name: '' } } }, methods: { updateResident: function () { // Update record here } } } </script>