Software

Many laravel/vue tutorials use ajax calls to get the data. It seems that the SPA is completely isolated from Laravel. I.e. Laravel is just a data API and the vue app could also simply be hosted on a third party external server (e.g. AWS S3). Is this the recommended way, or should I rather use Laravel for Routing and have separate views that implement individual components and already included data instead of using a SPA?

Here's my component.

<template> <v-ons-page> <v-ons-tabbar :visible="true" :tabs="tabs" position="top"> </v-ons-tabbar> </v-ons-page> </template> <template id="pendingPage"> <v-ons-page> <p>pending items</p> </v-ons-page> </template> <template id="completedPage"> <v-ons-page> <p>completed items</p> </v-ons-page> </template> <script> import Vue from 'vue'; const pendingPage = { template: '#pendingPage' }; const completedPage = { template: '#completedPage' }; export default { data() { return { activeIndex: 0, tabs: [ { label: 'Pending', page: pendingPage }, { label: 'Completed', page: completedPage } ] }; } }; </script>

Expected: I expect my component to render two tabs - Pending & Completed.

Problem: It only renders completedPage.

What I am doing wrong here?

I have the next code with vuejs, i call axios method post and set the authenticated user correctly(cosole show the user), but when i call the computed property in the component the user is empty

export default { data() { return { isAuth: null, } }, computed: { authenticatedUser () { return this.getAuthenticatedUser() } }, created() { this.isAuth = this.$auth.isAuthenticated() this.setAuthenticatedUser() }, methods: { setAuthenticatedUser () { axios.get('/api/user') .then(response => { this.$auth.setAuthenticatedUser(response.data) console.log(this.$auth.getAuthenticatedUser()) }) }, getAuthenticatedUser(){ return this.$auth.getAuthenticatedUser() } }, router }

And this my code for get the authenticated user

export default function (Vue) { let authenticatedUser = {}; Vue.auth = { //set token setToken (token, expiration) { localStorage.setItem('token', token) localStorage.setItem('expiration', expiration) }, //get token getToken() { var token = localStorage.getItem('token') var expiration = localStorage.getItem('expiration') if( !token || !expiration) return null if(Date.now() > parseInt(expiration)){ this.destroyToken() return null } else{ return token } }, //destroy token destroyToken() { localStorage.removeItem('token') localStorage.removeItem('expiration') }, //isAuthenticated isAuthenticated() { if(this.getToken()) return true else return false }, setAuthenticatedUser(data){ return authenticatedUser = data; }, getAuthenticatedUser(){ return authenticatedUser; }, } Object.defineProperties(Vue.prototype, { $auth: { get() { return Vue.auth } } }) }

When i not use the computed property

When i use the computed property in the model

I have an object and the structure looks like this

obj: { 1: { 'a': [ [] ], 'b': [ [] ] } }

Now, in watcher, I am trying to append 'c' => [ [] ] to this object.

• I tried using this.obj[key]['c'] = [ [] ], but it doesn't watch changes on the props when I do it this way. I am almost sure that I need to use $set

• this.$set(this.obj, key, { ['c']: [ [] ] }) - using this actually watches it, however it removes 'a' and 'b' properties entirely.

What is the proper way of using $set

It's works fine in Android's broswer or iPhone's Safari with other versions of iOS. But in 10.3.2, doesn't jump to target page.

I've created a portfolio here https://temp-portfolio.herokuapp.com. My issue is that when a user refreshes a page other than index.html or goes straight to another link such as https://temp-portfolio.herokuapp.com/projects the routing doesn't render. I've set up everything using Node.js and Express on Heroku following this guide https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8.

I tried rewriting the server to this https://stackoverflow.com/a/44226999/4178637 but the app crashes.

server.js

var express = require('express'); var path = require('path'); var serveStatic = require('serve-static'); app = express(); app.use(serveStatic(__dirname)); var port = process.env.PORT || 5000; app.listen(port); console.log('server started '+ port);

index.js

import Vue from 'vue' import Router from 'vue-router' import Nav from '@/components/Nav' import Home from '@/components/Home' import Projects from '@/components/Projects' import Urban from '@/components/Urban' import Seizure from '@/components/Seizure' import Explosion from '@/components/Explosion' import Decadence from '@/components/Decadence' import Threshold from '@/components/Threshold' Vue.use(Router) Vue.component('app-nav', Nav) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/projects', name: 'Projects', component: Projects }, { path: '/projects/urban', name: 'Urban', component: Urban }, { path: '/projects/seizure', name: 'Seizure', component: Seizure }, { path: '/projects/explosion', name: 'Explosion', component: Explosion }, { path: '/projects/decadence', name: 'Decadence', component: Decadence }, { path: '/projects/threshold', name: 'Threshold', component: Threshold } ], mode: 'history' })

main.js

import Vue from 'vue' import App from './App' import router from './router' import './assets/styles/styles.scss' Vue.config.productionTip = false new Vue({ el: '#app', router, template: '<App/>', components: { App } })

My root looks like this. I have defined types and history variables inside data and in watch, I am trying to access another variable rather than the one I am watching. Trying to access history variable outside .map() works however using it inside .map() returns undefined

new Vue({ el: '#root', data: { types: {}, history: {} } watch: { types: { handler(obj) { console.log(this.history) // works types.map(function(val) { console.log(this.history) // undefined }) } } } }

In my root, i have a setup like this,

new Vue({ el: '#root', data: { types: {}, history: {} } watch: { types: { handler(obj) { console.log(this.history) // gives me undefined } } } }

this.history throws undefined even though it is initialised as an empty object in data. Also, in this watcher, I can not use my methods inside methods: {}, it also says undefined.

However, if I do $vm0.history in my console, it doesn't say undefined.

What is the proper way of achieving this?

<div class="video" id="LOLPS32nWsg"> <div class="frame_block" v-if="videoShow('LOLPS32nWsg')"> </div> </div> methods: { videoShow: function (videoId) { return (videoId === this.video_id) ? true : false; }, }

How get id from class="video" and use in directive v-if?

I'm starting with vue.js. My question is about design patterns.

Should I have multiple Vue instances like this one:

var example = new Vue({ el: '#post-list', data: { posts: [ { title: 'Foo' }, { title: 'Bar' } ] } }); var example2 = new Vue({ el: '#post-list2', data: { posts: [ { title: 'Foo' }, { title: 'Bar' } ] } });

Or should I try to group my Vue code inside a big #app element like this:

var app= new Vue({ el: '#app', data: { posts1: [ { title: 'Foo' }, { title: 'Bar' } ], posts2: [ { title: 'Foo' }, { title: 'Bar' } ] } });

I'm looking for code maitenance and performance. What are the advantages of each approach? Is there a better pattern to follow?

New to Vue js (using version 2).

I would like to reuse the bubble-chart project in vue js. It has allot of goodies inside like 3D.js and some jQuery but it's ok for me for now (not being Vue js).

I understand that one way is to create parallel component of Vue js from scratch.
What is the correct way to import/reuse none Vue projects?

I have problem with dynamic number of radio input in array like that

Color:<br> <label><input type="radio" name="params[54]" value="21">Blue</label> <label><input type="radio" name="params[54]" value="38">Yellow</label> Size:<br> <label><input type="radio" name="params[12]" value="32">S</label> <label><input type="radio" name="params[12]" value="44">M</label> <label><input type="radio" name="params[12]" value="58">L</label>

It could not be only Color and Size and it shoud have more than two or three inputs. I use VueJS Component.

export default { data () { return { params: {} } }, methods:{ update: function(){ // here I want use params } } }

I need watch change input and get params object witch one are selected like:

{ 54: 21, 12: 44 }

I seriously don't know how can I do this. Any ideas?

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. I want to send data from my Node to front end. My project structure looks like this:-

SampleProject -> BackEnd -> FrontEnd

Should I use CORS node module? If not how should I send the data?

I am missunderstanding how to update a component. So, here is the HTML :

<div id="app"> <form v-on:submit="submitForm"> <input type="text" id="txtSearch"> <input type="submit" value="go"> </form> <br><br> <user></user> </div>

And the JS :

let userComponent = { template: 'your name is : {{name}}<br>You are {{age}}' }; let vueApp = new Vue({ el: '#app', components: {'user': userComponent}, methods: { submitForm: function(e) { e.preventDefault(); let val = document.getElementById('txtSearch').value; alert('submitted : ' + val); // normally i do a search here : let result = mySearch(val); // but let's do the job with this : let result = {name: 'John', age: 27}; // so now, how to modify the <user> with this data result ? } } });

So, my aim is to create a template, and of course update his data. How to do this ? I created a jsfiddle for testing : https://jsfiddle.net/4w0kh30t/1/ Thanks for your help.

i'm working on a sandbox project using Vue.js, Vue-resource, Vuex and json-server. I succeed to use the GET request with Vue-resource to display all my Customers but when i'm trying to remove a selected customer, the console show me a 404 error.

Here the error

Error 404

Can you help me to resolve this issue please ? Thanks :D

Here my Vuex store :

import Vue from 'vue' import Api from '../../../lib/Api' export default{ state: { customers: [], profiles: [], }, actions: { getCustomers({commit}) { Vue.http.get(Api.getCustomersUrl(), {}).then((response) => { commit('loadCustomers', response.data); }) }, getCustomerProfile({commit}, id) { Vue.http.get(Api.getCustomerProfile(id), {}).then((response) => { commit('loadCustomerProfile', response.data); }) }, deleteCustomerProfile({commit}, id) { Vue.http.delete(Api.getCustomerProfile(id), {}).then((response) => { }, (response) => { console.log('erreur', response) }) }, removeAllProfile({commit}) { Vue.http.delete(Api.getCustomersUrl(), {}).then((response) => { }) } }, mutations: { loadCustomers(state, customers) { state.customers = customers }, loadCustomerProfile(state, profiles) { state.profiles = profiles }, removeCustomerProfile(state, profiles) { state.profiles = profiles }, removeAllCustomerProfile(state, customers) { state.customers = customers } }, }

Here my customers component :

<div class="customers-list"> <div class="customers-list__content"> <img :src="customer.photo" @click.self="selectProfile"> <p>{{customer.first_name}}</p> <p>{{customer.last_name}}</p> <p>{{customer.jobTitle}}</p> <p>{{customer.email}}</p> <p>{{customer.company}}</p> </div> </div> </div> </template> <script> export default{ props: ['customer'], methods:{ selectProfile() { this.$store.dispatch('getCustomerProfile', this.customer.id) console.log(this.customer.id); }, removeAll(){ this.$store.dispatch('removeAllProfile') } }, } </script>

Here my selected customer component :

<template> <div> <img :src="profile.photo"> <p>{{profile.first_name}}</p> <p>{{profile.last_name}}</p> <p>{{profile.jobTitle}}</p> <p>{{profile.email}}</p> <p>{{profile.company}}</p> <p>{{profile.id}}</p> <i class="fa fa-trash-o" aria-hidden="true" @click.self="deleteProfile"></i> </div> </template> <script> import {mapState} from 'vuex' export default{ props:['profile'], methods: { deleteProfile(){ this.$store.dispatch('deleteCustomerProfile', this.profile.id); console.log(this.profile.id); }, }, } </script>

And here my Homepage to display all my content with a v-for directive :

<div class="home"> <h1>Hello, world !</h1> <div class="home__forms"> <input type="text" v-model="firstname" placeholder="first name"> <input type="text" v-model="lastname" placeholder="last name"> <input type="text" v-model="jobTitle" placeholder="job"> <input type="text" v-model="email" placeholder="email"> <input type="text" v-model="company" placeholder="company"> <input type="text" v-model="photo" placeholder="photo"> <button @click="submit">Add</button> </div> <div class="customers"> <customers-list v-for="(customer, index) in customers" :customer="customer" :key="customer.id"></customers-list> </div> <profile v-for="(profile, index) in profiles" :profile="profile" :key="profile.id"></profile> </div> </template> <script> import {mapState} from 'vuex' import CustomersList from './CustomersList.vue' import Customer from './Customer.vue' export default{ components: { 'customers-list': CustomersList, 'profile': Customer, }, data() { return{ firstname: "", lastname:"", jobTitle:"", email: "", company: "", photo:"", error: false, } }, computed: mapState({ customers: state => state.test.customers, profiles: state => state.test.profiles, }), methods:{ submit(){ var self = this; if(this.email === "" || this.firstname === "" || this.lastname ==="" || this.jobTitle === "" || this.company === "" || this.company === "" || this.avatar === "") { this.error =true } else { this.$http.post(process.env.API_URL + '/customers', { first_name: this.firstname, last_name: this.lastname, jobTitle: this.jobTitle, email: this.email, photo: this.photo, company: this.company }).then((response) => { self.error = false }, () => { self.error = true }); console.log("submitted"); } } }, created(){ this.$store.dispatch('getCustomers') }, } </script>

Have a good day !

I am integrating Vue2 and Foundation-sites, I keep getting this error Refused to load the font 'https://sxt.cdn.skype.com/assets/fonts/SkypeAssets-Regular.woff' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Kindly Help!!

I get this problem whenever I modify an array that is used to render a v-for list.

Let's say I've got a v-for list of three items:

<ul> <li v-for="item in items"></li> <ul></ul> <ul> <li>One</li> <!-- Has focus or a specific child component --> <li>Two</li> <li>Three</li> </ul>

Add a new item to the items array:

<ul> <li>New Item</li> <!-- Focuses on this item, the child component seems to be moved here --> <li>One</li> <li>Two</li> <li>Three</li> </ul>

The focus seems to move...

Please have a look at a fiddle that illustrates the problem https://jsfiddle.net/gu9wyctr/

I understand that there must be a good reason for this behaviour, but I need to manage it or avoid completely. Ideas?

I am trying to get a single key from firebase nodes and I can't get any from the code I have right now. Here is my code:

let app = Firebase.initializeApp(config) let db = app.database() let bdRef = db.ref() export default { name: 'hello', firebase: { businesses: bdRef.orderByChild('.key').equalTo('306') } }

I get this error when doing this: validation.js?5c80:234 Uncaught Error: Query.orderByChild failed: First argument was an invalid path = ".key". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

When I do this with my code:

businesses: bdRef.orderByChild('title').equalTo('Feather Animation Wood Carving Supplies')

It comes with this array:

0:Object .key:"3021" address:"Hello Avenue" city:"" description:"Wood carving tools and supplies. Please contact us by phone or internet." email:"hi@gmail.com" employees:"1"

How do I get the .key property?

I am trying to use this tutorial https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8 so that I only push the dist folder to heroku. I am using the following code:

"deploy": "git subtree push --prefix dist heroku master"

so when I am satisfied with my changes that i have made locally, i do the following.

npm run build git add -A git commit -m "message" git push npm run deploy

then i get an error message that reads:

! [rejected] a1869b5091eac1a50721d4c0cb8385f48338d8d9 -> master (non-fast-forward) error: failed to push some refs to 'https://git.heroku.com/foobar' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details.

What am I doing wrong? If I run git push heroku at this point, it works fine.

I'm developing SPA at first time. I't easy to use middleware in Laravel, but I have no Idea how to use it in Vuejs. I have 2 types of user and how can I give them an access to specific pages only? Unauthorized users should have access to home page only.