Software
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>Cannot assign to read only property 'prototype' of function 'class Template7
I'm following this tutorial to make an app w/ Framework7-Vue. http://blog.toast38coza.me/building-a-mobile-app-with-vuejs-cordova-webpack-and-framework-7/
For some reason, I see a blank screen once I've copied all the code and installed everything. I get no errors during compile time. I get the following error once the app is running in the console
Uncaught TypeError: Cannot assign to read only property 'prototype' of function 'class Template7 { constructor(template) { const t = this; t.template = template; function getCom...<omitted>... }' at Object.eval (webpack-internal:///29:381) at eval (webpack-internal:///29:557) at Object.<anonymous> (app.js:879) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///21:1) at Object.<anonymous> (app.js:826) at __webpack_require__ (app.js:660) at fn (app.js:86) at eval (webpack-internal:///10:3)Any ideas what could be causing this?
Vuejs returns [object Object] from data attribute
I have the following jsfiddle example (check the console) and all you will see is [object Object] instead of person data:
So, basically I have a vuejs instance and a div for v-for to iterate an object
<div id='app'> <p v-for="person in people[0]"> <span> {{ person.name }}</span> <i class="fa fa-check" v-bind:data-identity="person" @click="addDetail($event)"></i> </p> </div>The problem is that if I echo {{ person }} I can see a JSON data on the page, but if I try to get it in the function addDetail() with e.target.dataset.identity then all I get is [object Object] and not the json data. I have tried JSON.parse and String methods, non of them work.
nuxt can't use vue-factory in asyncMethod & fetch method
iam using vue-factory to inject some service in my nuxt app (vue-ssr). the problem is i can't use my service in asyncMethod & fetchMethod in nuxt. The service can only running on browser event (in mounted and methods);
i have trying this to add my service on context method in nuxt, but its raise an error in browser Cannot redefine property: $Vue
import Vue from 'vue'; import factory from 'vue-factory'; import postService from '../service/postService'; import commentpostService from '../service/commentpostService'; Vue.use(factory); Vue.factory.register({ 'postService': postService, 'commentpostService': commentpostService, }); export default ({ app, store }) => { Vue.factory.register({ 'postService': postService, 'commentpostService': commentpostService, }); // app.postService = postService; // app.commentpostService = commentpostService; }can anyone solve this