Software
Unknown custom element using VUE
I'm new to Vue and am having some trouble with a few things. First, off I was following this tutorial: eventbus. If I put all the code (html, JS and CSS) in one html file, this works just as described in this tutorial.
However, I have been reading and I was following a VUE cli app structure. I used vue init webpack vueapp01 So, I have an index.html file in the vueapp01 root folder, in the src folder I have an app.vue and two vue files in the components folder; the-box.vue and the-button.vue; along with all the other files loaded by the vue template webpack.
Instead of having all the code in one html file (which works) I have the code separated out like this: index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vueapp01</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> App.vue:
<template> <div id="the-example" class="container"> <h1>Building an Event Bus with <a href="https://vuejs.org" target="_blank">Vue.js</a></h1> <div class="row"> <div class="col-xs-6"> <the-button what="Event #1"></the-button> <the-button what="Event #2"></the-button> <the-button what="Event #3"></the-button> </div> <div class="col-xs-6"> <the-box name="Receiver #1"></the-box> </div> </div> </div> </div> </template> <script> import the-button from './components/the-button' import the-box from './components/the-box' export default { name: 'app', components: { the-button,the-box } } </script> <-- <script> /****************************************** The Central Event Bus Instance *******************************************/ let EventBus = new Vue(); </script> the-box.vue:
/****************************************** Example Root Vue Instance *******************************************/ new Vue({el: "#the-example"}); /****************************************** A sample Vue.js component that emits an event *******************************************/ let TheButton = Vue.extend({ name: "the-button", props: ["what"], template: ` <button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button> `, methods: { makeItHappen: function(){ EventBus.$emit("somethingHappened", this.what) } } }); Vue.component("the-button", TheButton); the-button.vue:
/****************************************** A sample Vue.js component that received an event *******************************************/ let TheBox = Vue.extend({ name: "the-box", props: ["name"], template: ` <div class="well"> <div class="text-muted">{{name}}</div> <div>{{respondedText}}</div> </div> `, data: function(){ return { respondedText: null } }, created: function(){ EventBus.$on('somethingHappened', (what)=>{ this.respondedText = 'Event Received: ' + what; }) console.log("Responder") } }); Vue.component("the-box", TheBox);
Currently, I'm getting the errors, "unknown custom element the-box", "unknown custom element the-button". I've tried switching the script and template orders to have templates load first but I still have no luck.
Any help would be greatly appreciated. Also, I assume I'm doing this correctly by separating these components out to separate files but if that is incorrect I'd gladly take criticism on the way I'm learning to use Vue.
Vue/Vuefire: Ok, I can open a modal, save a image file to firebase, but can't get it to view without a refresh
Lots of pieces, got them all working except one!
I can open a modal window, do a firebase image upload (with the correct call back to make sure the upload worked), save the image to firebase storage (using vuefire). And close the modal.
The image DOES NOT show up until I do a manual refresh, then displays fine. Also if the image has been cached, it works OK. Just can't figure out why I can't view the new image without that manual refresh.
CODE
HTML to Display image: edit.vue
<div> <img :src="showPhoto()" id="showPhoto" name="showPhoto" /> </div>VUE code to populate html and open modal
showModal: function() { this.$modal.show('save') }, showPhoto: function () { const photoName = this.residentObj['photo'] console.log('photoName', photoName) if (photoName) { const gsReference = storage.refFromURL('gs://connect-the-dots-ef09c.appspot.com/images/' + this.$route.params.id + '/' + photoName).getDownloadURL().then(function(url) { var img = document.getElementById('showPhoto') img.src = url }) } }Save uploaded image close modal, go back the parent page. I can push a new route, but that has no effect even though the image has changed.
save.vue
methods: { onFileChange(e) { const file = e.target.files[0]; const storageRef = firebase.storage().ref('images/' + this.$route.params.id + '/' + file.name); residentsRef.child(this.$route.params.id).update({photo:file.name}); storageRef.put(file).then(function(result) { alert("OK, file uploaded!") // this has no effect, and probably dont want to refresh the entire page this the "img src" // this.$router.push({name: 'edit', params: { id: this.$route.params.id }}); }}); this.closeModal () });Summary: I can save an image to firebase using vue/vuefire, but can't view the new image unless I do a manual refresh. A cached image works fine.
Thanks for any tips.
How to resolve Cross-Origin Request Blocked in vue.js?
I'd like to send Google oauth2 authentication from vue.js on my development machine. Here is the function:
authenticate: function (provider) { axios.get( this.BASE_URL + "/web/login" , { token: this.token, }).then(function(data){ console.log(data); }); }But I get this error on Firefox instead:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/auth?client_id=something.apps.googleusercontent.com&... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
I use go gin as backend and have set it to use CORS.
router.Use(cors.Middleware(cors.Config{ Origins: "*", Methods: "GET, PUT, POST, DELETE", RequestHeaders: "Origin, Authorization, Content-Type", ExposedHeaders: "", MaxAge: 86400, Credentials: true, ValidateHeaders: false, }))So wondering who can I fix this error.
i get a blank pdf with axios in vue js
this is the action the get the pdf from the server
genratePdf({ commit }, data) { console.log(data) axios.post('http://localhost:1337/getpdf', data,{ responseType: 'application/pdf' }).then((response) => { console.log(response) let blob = new Blob([response.data],{type:'application/pdf'}) var link=document.createElement('a'); link.href=URL.createObjectURL(blob); link.download="Report_"+new Date()+".pdf"; link.click(); }, (err) => { console.log(err) }) }when i console log the response i get this result
but when i console the blob variable it doesn't contain the data
and the pdf i get is blank
how to trigger a function in vuejs after the page is loaded?
I am trying to trigger a function which hides or show the images on the basis of data i have written two function one which calls the api which is in created hook and second function which renders the image . The problem is how do i call that second function after the dom is loaded , right now when i am trying to call in the first function or created it is returning me error that css cannot be changed of null.
created:function(){ this.loadlike()
}, methods:{ loadlike:function(){ var self = this this.$http.get('/api/user_profile').then(function (res) { self.tasksdata = res.body self.badges = self.tasksdata.data2 console.log(self.badges) console.log(this.tasksdata) console.log(this.max) }) }, getHumanDate : function (date) { return moment(date, 'YYYY-MM-DD hh-mm-ss').locale("en-gb").format('LL'); }, render_badges:function(){ var self = this var counter = 0; self.badges.map(function(e){ counter ++; console.log(counter) if(counter <=self.max){ document.getElementById("i").style.display = "initial"; } else{ document.getElementById("i").style.display = "none"; } }) }VUE, React, Angular. Javascript multi-module applications using Webpack
I search the way to split VUE 2 application to modules using Webpack. I found this example of the project structure:
app/ moduleA/ components/ vuex/ index.js routes.js moduleB/ components/ vuex/ index.js routes.js vuex.js Main.vue router/ vuex/ components/ -> shared main.jsOne of the main requirements is possibility to build application with choosen modules using configurable profiles. Is there some best practices to implement this approach? May be someone using similar approach with the other javaScript frameworks like Angular or React? There is a similar question: bundling large Vue application using webpack
VueJs: Failed To Mount Component
not sure what the problem is here, I'm using Vue Router and instead of loading the component it throws me this vague Error:
Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>Here is my Entry Point (app.js) (note I'm using multiple Entries in Combination with the CommonsChunksPlugin):
import Vue from 'vue' import '../../../assets/css/main.css' import App from './app.vue' new Vue(App).$mount('#app')The Html File (app.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <div id="app"></div> </body> </html>(app.vue)
<template> <div> <router-view></router-view> </div> </template> <script> import { router, } from './bootstrap.js'; export default { router, }; </script>The Router:
import Vue from 'vue'; import VueRouter from 'vue-router'; var routes = [ { path: '/login', name: 'login.index', component: require('./index/index.vue'), }, { path: '/', redirect: '/login', }, ]; Vue.use(VueRouter); export const router = new VueRouter({ routes, }); Vue.router = router; export default { router, };And Finally the Component:
<template> <div> <h1>Test</h1> </div> </template> <script> export default {} </script>The Router works, I get redirected to /login as expected but the Component wont load. Any Help would be greatly appreciated
Thanks in Advance, Jan
Vue $on not running my function when event $emit is emited, even though I can see the event triggered in Vue console
I am trying to test if my $on function is working. I can clearly see that the the Vue console is receiving the event emit, but the pre defined call back function in $on is not being called.
Here is the code:
<template lang="html"> <div class="test"> <Filters></Filters> <div> <ul class="o-list c-stores"> <Result v-bind:total="filteredRestuarants.length" v-bind:open="isOpen" v-on:toggle="toggleRestaurantList"></Result> <li v-for="(restaurant, index) in filteredRestuarants" class="c-stores__location" :class="{'first': isFirst(index), 'last': isLast(index, restaurants)}"> <Location :index="index" :store="restaurant" :link="() => setCurrentRestaurant(restaurant)"></Location> </li> </ul> </div> </div> </template> <script> import eventHub from './../../event-hubs/storefinder' import Location from './Location' import Filters from './Filters' import Result from './Result' export default { props: ["restaurants", "isOpen", "currentSearch"], data() { return { attributes : [], } }, head: { title: function () { return { inner: this.$t('storefinder.overview') } }, meta: function functionName() { return [{ name: 'og:title', content: this.$t('storefinder.overview') + ' - ' + this.$t('storefinder.name'), id: "og-title" }, { name: 'description', content: this.$t('storefinder.description'), id: "meta-description" }, { name: 'og:description', content: this.$t('storefinder.description'), id: "og-description" }, ] } }, components: { Location, Filters, Result },Here its being added to the eventHub
computed: { startEvents(){ eventHub.$on('addFilterTheRestaurants', (attribute) => {console.log("test")}); eventHub.$on('removeFilterTheRestaurants', (attribute) => {console.log("test")}); }, filteredRestuarants(rest) { let restaur = rest || this.restaurants; return this.restaurants; } }, methods: { toggleRestaurantList() { eventHub.$emit('showRestaurantList'); }, setCurrentRestaurant(restaurant) { this.trackRestaurantSelect(restaurant.publicNameSlug); this.$router.push({ name: "store", params: { restaurant: restaurant.publicNameSlug } }); }, trackRestaurantSelect(restaurantName) { dataLayer.push({ 'event': 'GAEvent', 'eventCategory': 'restaurants', 'eventAction': 'clickResult', 'eventLabel': restaurantName, 'eventValue': undefined, 'searchTerm': this.currentSearch && this.currentSearch.toLowerCase(), 'amountSearchResults': 1 }); }, created() { // eventHub.$on('addFilterTheRestaurants', (attribute) => this.filteredRestuarants.value = this.restaurants.forEach(rest => {console.log(rest)})); // eventHub.$on('addFilterTheRestaurants', (attribute) => {console.log("test")}); // eventHub.$on('removeFilterTheRestaurants', (attribute) => {console.log("test")}); }, beforeDestroy () { bus.$off('addFilterTheRestaurants') bus.$off('removeFilterTheRestaurants') }, isLast: function (idx, list) { return idx === list.length - 1; }, isFirst: function (idx) { return idx === 0; }, } } </script>Cant find much information on this topic anywhere.
Laravel Spark, only showing the cancel subscription option after adding a subscription plan
After connecting the stripe payment system with my Laravel Spark installation I quickly setup some subscription options. Next, I subscribed to one of them using the test credit cards. Everything seems fine at the Stripe dashboard. However, if go the subscriptions page, I only see a big CANCEL SUBSCRIPTION button and not the selected subscription as well as the other subscriptions. I didn't touch the Spark components since I'm afraid to break something... so most of the stuff is pretty vanilla except for the configuration input. I checked with Chrome developer and these are the errors that seems to be linked:
app.js:42231 [Vue warn]: Error in render function: "TypeError: Cannot read property 'active' of undefined" found in ---> <SparkUpdateSubscription> <SparkSubscription> <SparkSettings> <Root> warn @ app.js:42231 app.js:42318 TypeError: Cannot read property 'active' of undefined at Proxy.render (eval at createFunction (app.js:51564), <anonymous>:2:24583) at VueComponent.Vue._render (app.js:45869) at VueComponent.updateComponent (app.js:44288) at Watcher.get (app.js:44629) at new Watcher (app.js:44618) at mountComponent (app.js:44292) at VueComponent.Vue$3.$mount (app.js:49600) at VueComponent.Vue$3.$mount (app.js:51803) at init (app.js:45245) at createComponent (app.js:46884)Anyone had this error or have an idea to fix it?
Thanks in advance
Enclosing a router-link tag in an image in vuejs
Can I wrap or enclose a router-link tag in an image tag?
When I click the image, I want it to route me to the desired page.
D3 - How to zoom a map on click of marker?
I'm using d3 to create a map and following is my requirement :
1. Plot markers on map
2. On click of marker, zoom into the map and update the map with new markers.
3. On click of the new markers show a tooltip.
Till now, I've managed to do the steps 1 and 3, but I don't understand how to achieve step 2.
Vue.js: EventBus.$on received value is not propagating
I am fairly new to vue and trying to figure out the best way to structure my event bus. I have a main layout view (Main.vue) inside of which I have a router view that I am passing a child's emitted info to like so:
<template> <layout> <router-view :updatedlist="mainupdate" /> </layout> </template> export default { data () { return { mainupdate: [] } }, mounted () { EventBus.$on('listupdated', item => { this.mainupdate = item console.log(item) }) } }The structure looks like: Main.vue contains Hello.vue which calls axios data that it feeds to child components Barchart.vue, Piechart.vue, and Datatable.vue
The axios call in Hello.vue populates a data property called list. I then check if updatedlist (passed as router prop from Datatable.vue to Main.vue when something changes) is empty, and if so set it to the value of list
I know that the event is being emitted and received by Main.vue because the console.log(item) shows the data. But my child components are not getting updated, even though they are using updatedlist as their data source. (If I reload the page, they will be updated btw, but why aren't they reactive?)
Vue 2 - getting computed backgroundImage dynamically
I have few divs and I need to set the backgrounds of each from values that I have in an array. I have tried to set the background overlay to each of them by creating the computed property:
computed: { backgroundImage(url) { let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; return 'background-image:'+ overlay +' , url(' + url + ');'; } }And then I was thinking of passing the url like this to computed property:
:style="{ backgroundImage: url(`${articles[0].image.src}`) }"But, that doesn't work, I am not getting the computed value back, how can I do that?
Vue.JS on top of existing python/django/jinja app for filter and list render
I have an existing python/django app with jinja template engine.
I have a template with a filter and a list the gets rendered correctly via server, also the filters work perfectly without javascript. (based on url with parameters)
The server also responds with json if the same filter url is requested by ajax. So it's ready for an enhanced version.
Now: I would like to make it nicer and update/rerender the list asynchronously when I change the filter based on the json response I receive.
Questions:
When I init the vue on top of the page template, it removes/rerenders everything in the app. All within the vue root element becomes white. Can I declare only parts of my whole template ( the one filter and the list) as separate vue components and combine these instances (there are other parts that are not part of the async update part vue should not take of)
Can I somehow use the existing markup of my components in jinja to be used to rerender the components again with vue or do I have to copy paste it into javascript (please no!) ?
TLDR: I don't wan't to create the whole model with vue and then prerender the whole app (modern SSR way) and vue will find out the diff.
I just want to use vue on top of an existing working django app.
Vue JS changing data in one array changes
i can't understand what the ... want this vue! please help if you can! this is my code
var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, methods: { getDepartment() { var sendData = id; // this is example this.$http.post('some api ', sendData, {emulateJSON: true}) .then( resp => { this.currentFullData = resp.data; } }, getLocalDepartment() { this.localData = this.currentFullData; } } })in currentFullData for example i have 4 boolean field, 'create' , 'read', 'update', 'delete'
this 4 fields gets localData too, but when i change in localData some of them, they changes in currentFullData too!!!!!!!!!!!!!!!
soooooo anyone can explain me wtf is this?!?!?!
import Vue from 'vue'Vue Routes are working properly in development server, but not working in production
I am developing an application with vuejs, and using vue-route for routing. I created a route.js as:
import Vue from 'vue' import VueRouter from 'vue-router' import Content from './components/Content.vue' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home, meta: { forVisitors: true, title: 'Univibe Plus', } }, { path: '/content', component: Content, meta: { forVisitors: true, title: 'Content', } } ] }) export default routeron running sudo npm run dev routes are working fine, but when I create production application using sudo npm run build only / page is working and /content page is not working and giving error "cannot get page /content". Kindly help me out here.
Dynamically populate array with Freebase Data Vue.js
I am using Vue.js with Chart.js in order to retrieve some data from Firebase and display it on a chart. This is my code:
import {Line} from 'vue-chartjs' let Firebase = require('firebase'); // let config = { apiKey: '****************************', authDomain: '****************************', databaseURL: '****************************', storageBucket: '****************************' }; let firebaseApp = Firebase.initializeApp(config); let db = firebaseApp.database(); let schools = db.ref('schools'); export default Line.extend({ firebase: { schoolsArray: schools }, data(){ alert('data'); return { names: [] } }, computed: { schoolNames: function () { for (let item of this.schoolsArray) { this.names.push(item.name); } alert('computed'); return this.names } }, mounted () { alert('mounted'); this.renderChart({ labels: this.names.toString(), datasets: [{ label: 'School Reports', backgroundColor: '#dd4935', data: [10, 20, 50, 12, 34, 43, 45] }] }, {responsive: true, maintainAspectRatio: true}) } })The problem is that the names array are always empty and the labels are not displayed. Here is how it looks:
I need to display the school names on the x axis!
What is the purpose of Vue.js?
I tried to understand the utility of Vue.js from its site Vue, but I still fighting to get best out of it.
There are tons of framework available in the market including angular and react, Why someone will go in different direction with the progressive web application?
Can anybody help me by explaining how it works and how could it be helpful in using Vue to create a better application?
VueJS pass prop to child
I have 2 components Parent and Child - a parent can have many children. I need the children to know their position (index) in relation to their siblings.
Javascript
Vue.component('Parent', { template: '<div><slot></slot></div>', mounted: function() { this.$children.forEach(function(child, index) { /* attempt one */ child.$el.setAttribute('test-prop', index); /* attempt two */ child.$props.testProp = index; }) } }) Vue.component('Child', { template: '<div><span>{{testProp}}</span><slot></slot></div>', props: ['testProp'] });Markup
<Parent> <Child>some complex html</Child> <Child>some complex html</Child> <Child>some complex html</Child> <Child>some complex html</Child> </Parent>attempt one results in undefined but dom inspector shows the property has been applied
attempt two throws a direct prop mutation warning but the child still doesn't appear to have access to the index.
The indices are only known at the point of Parent being mounted, so I can't apply the prop directly to the Child elements in the Markup.
What would be the best way to tackle this?
working with editable with vuejs
I have a table that look like 
:
here i can define how many rows and columns i want on my table and the table get updated as i want, at here everything fine, the next step i need is to change the content of each cell and bind it to an array, i really don't know how to accomplish this, seems like contenteditable has some issues with v-model.
Another problem is that i don't know how to pass the data to my data object, should i pass it as a matrix? a array? i need to know each input for the specific row and columns, any help?
here is what i did so far:
<template> <div> <form class="form-horizontal"> <h2 class="text-center"> Table </h2> <div class="form-group"> <div class="col-md-1"> <button @click="changeView('appTableStyle')" type="button" class="form-control btn btn-xs btn-warning"> <span class="glyphicon glyphicon-pencil"></span> </button> </div> <label for="rows" class="control-label col-md-1">style:</label> <div class="col-md-6"> <select class="form-control" v-model="table.tableStyle"> <option v-for="(item,key) in tableStyles" :value="item.Id"> {{ item.style }} </option> </select> </div> </div> <div class="form-group"> <label for="rows" class="control-label col-md-2">rows:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div> <label for="columns" class="control-label col-md-2">How Many?:</label> <div class="col-md-2"> <input type="number" min="1" v-model="insert" class="form-control" id="cols"> </div> </div> <table class="table table-responsive" style="background-color:lightGray"> <tbody> <tr v-for="(row,idx2) in tableRows"> <td v-model="table.colsArr[idx]" :key="" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td> </tr> </tbody> </table> <div class="form-group"> <div class="col-sm-offset-2 col-sm-9"> <div class="text-center"> <button type="submit" @click.prevent="addTable" class="btn btn-success margin-above2 btn-block">Add Table</button> </div> </div> </div> </form> </div> </template> <script> export default { name: 'app', data () { return { table: { rows: 1, cols: 1, key: 'Table', tableStyle: 1, colsArr: [] }, insert: 1 } }, methods: { }, changeView: function (view) { this.$store.commit('changeCurrentView', view) } }, computed: { tableStyles () { return this.$store.getters.getTableStyles }, tableRows () { return parseInt(this.table.rows) }, tableCols () { return parseInt(this.table.cols) } } } </script>