Software
Using VueJs build tools with Laravel
I am using VueJs with Laravel and am using the Laravel's default installation of VueJs with their Laravel-Mix.
I want to use Babel, Eslint and Vue-Router all of which don't seem to come with Laravel's default installation?
How can I use the Vue Cli to handle all of this with Laravel or do I need to pull everything in separately, something that the Vue Cli was built for?
vue.js:465 [Vue warn]: Failed to generate render function:
I got an error like this:
vue.js:465 [Vue warn]: Failed to generate render function: ReferenceError: Invalid left-hand side in assignment in with(this){return _c('div',{attrs:{"id":"test"}},[_c('p',[_v(_s(_f("sum 4")(message)))]),_v(" "),_c('p',[_v(_s(_f("cal 10 20 10")(message)))]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(message | change),expression:"message | change"}],attrs:{"type":"text"},domProps:{"value":(message | change)},on:{"input":function($event){if($event.target.composing)return;message | change=$event.target.value}}})])}This is my HTML file:
(found in <Root>) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <script src="D:\library\vue.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div id="test"> <p>{{ message | sum 4 }}</p> <p>{{ message | cal 10 20 10 }}</p> <input type="text" v-model="message | change"> </div> <script type="text/javascript"> // -----------------------------------------model->view--------------------------------------- Vue.filter("sum", function(value) { return value + 4; }); Vue.filter('cal', function (value, begin, xing) { return value + begin + xing; }); // -----------------------------------------view->model--------------------------------------- Vue.filter("change", { read: function (value) { return value; }, write: function (newVal,oldVal) { console.log("newVal:"+newVal); console.log("oldVal:"+oldVal); return newVal; } }); var myVue = new Vue({ el: "#test", data: { message:12 } }); </script> </body> </html>I learn vue.js these days,and I found it funny.but this is a big mistake that make me headache......Is there any grammar mistakes?How can I do for this mistake? And what's the meaning of the error? Thank you very much.
Is there a way we can apply two vue.js libray on one element?
For example, with vue draggable library we can drag an html element to another position. and with vue selectable libaray, it is possible to allow an element to be selected. But these two props are based on there each two different library.
Is there a way that we can mix in these two vue libraries in the same element, so we can make it draggable and selectable at the same time?
Thank you for your kindness.
vuejs: router-link params is empty
I have defined a router-link
<router-link :to="{ path: linkTo + '/' + item.name, params: { id: item.id } }" >{{item.name}}</router-link>But when I inspect the router-link, the params object is always empty.
What i'm doing wrong? If I just output the id with {{item.id}} i get the number...
This is my route
{ path: '/category/:name', component: Category, props: true, name: 'category', meta: { auth: true } },gregor
Login in Laravel 5.4 Vue.js app with JWT doesn't work
It happens that everything works in my laravel/vue.js application excluding the login that I have to implement now.
I'm using JWT and when I try to login from my Vue template it shows this, but when I test the route created on the back end, it returns the Token without any problem, like this.
Here is the code of my login component of the front-end app...
<script> import bar from '../bar.vue' import axios from 'axios'; export default { components: { 'bar': bar, }, data(){ return { email: '', password: '' } }, methods: { login(){ axios.post('http://localhost:8000/api/signin', { email: this.email, password: this.password }, { headers: {'X-Requested-With': 'XMLHttpRequest'} } ) .then( (response) => console.log(response) ) .catch( (error) => console.log(error) ); } } }Vue + vuex object mutations
I have a state:
state: { objects: [ { id: 10, key2: 'smth', key3: 'smth' //etc... }, { id: 12', key2: 'smth', key3: 'smth' //etc... } ] }I pick one by id and then i want to change the value of keys on picked object.
The problem is vuex tells me that i have to make changes in mutations only. I saw a many solutions like computed: get() set(), or _.deepClone or change only one key. but what i can do to rewrite entire object by id in mutation? My objects in array may be with many keys so write update commit func to every key will be very painful..
Is there a solution to rewrite object with many keys with 1 commit?
And please don't tell me to use lodash or other lbis, only plain vue/js.
vue js router + firebase authentication
I use vue js 2.4.2 , vue router 2.7.0 , and firebase 4.3.0. I can't get the route authentication stuff to work. This is my current route.js
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Firebase from './firebase' import Dashboard from './components/Dashboard.vue' import Auth from './components/Auth.vue' let router = new Router({ mode: 'history', routes: [ { path: '/', component: Dashboard, meta: { auth: true } }, { path: '/login', component: Auth } ] }) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.auth)) { if (!Firebase.auth().currentUser) { next({ path: '/login' }) } else { next() } } else { next() } }) export default routerBut now everytime I go to / it redirects me back to /login, probably because the Firebase.auth().currentUser is null, even though I am in fact logged in. How do I fix this?
How do i count new lines with vuejs from textarea?
I try to count new lines from textarea with vuejs i have this textarea
<textarea v-model="modelarea" v-on:keyup="show"> </textarea>vuejs code
new Vue({ data:{ modelarea:'' }, methods: { show: function(){ var length = 0; for(var i = 0; i < this.modelarea.length; ++i){ if(this.modelarea[i] == '\n') { length++; } } } })and echo it
<label>{{ length }}</label>But it don't work the function I think is wrong.
Vue Wizard Form radio button validation
I am working with vue-form-wizard by Cristi Jora integrating Element UI the basic example is here
Vue.use(VueFormWizard) new Vue({ el: '#app', data: { formInline: { user: '', region: '', gender: '' }, rules: { user: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }], region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }], } }, methods: { onComplete: function() { alert('Yay. Done!'); }, validateFirstStep() { return new Promise((resolve, reject) => { this.$refs.ruleForm.validate((valid) => { resolve(valid); }); }) } } })https://jsfiddle.net/bt5dhqtf/409
but i am not able to validate radio buttons, please help me :(
here is my example https://jsfiddle.net/bt5dhqtf/884/
Nuxt build throwing WebpackOptionsValidationError on Heroku
I am trying to put a NuxtJS / ExpressJS app on Heroku and the nuxt build command is failing throwing WebpackOptionsValidationError:
Stack trace:
nuxt:build Building... +0ms [AXIOS] Base URL: https://now-staging.hl.com/ , Browser: https://now-staging.hl.com/ nuxt:build App root: /Users/aslam/Work/hl-student-web +0ms nuxt:build Generating /Users/aslam/Work/hl-student-web/.nuxt files... +0ms nuxt:build Generating files... +5ms nuxt:build Generating routes... +17ms nuxt:build Building files... +26ms WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module.rules[2].use should be one of these: non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }] Details: * configuration.module.rules[2].use should be a string. * configuration.module.rules[2].use should be an instance of function. * configuration.module.rules[2].use should be an object. * configuration.module.rules[2].use should be one of these:Complete stacktrace: https://gist.github.com/aslam/b1e4bfb4a8c07ce158dd44ccaafdaea1
My nuxt.config.js is the following:
module.exports = { router: { middleware: ['namespace', 'check-auth'] }, head: { title: 'HL Student - Web', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' } ] }, loading: { color: '#3B8070' }, build: { vendor: ['vuetify', 'vuelidate'] }, modules: [ '@nuxtjs/pwa', '@nuxtjs/component-cache', ['@nuxtjs/axios', { baseURL: 'https://now-staging.hl.com/', credentials: false, requestInterceptor: function _reqInterceptor (config, { store }) { if (store.getters.accessToken) { config.headers.common['Authorization'] = 'Bearer ' + store.getters.accessToken } return config } }] ], plugins: [ '~plugins/vuex-router-sync.js', '~plugins/vuetify.js', '~plugins/vuelidate.js', '~plugins/firebaseConfig.js' ], css: [ { src: '~assets/style/app.styl', lang: 'styl' }, { src: '~assets/style/typography.scss', lang: 'scss' } ] }Versions:
"node": "6.11.0", "npm": "3.10.10", "yarn": "0.27.5"The build is failing on Heroku. Any pointers appreciated.
how to destroy all the data of the current page
in my page , I have a real-time chart which updates every 3 seconds I used setInterval(function(){...} , 3000) for make the chart updates. but my problem is when I move to another page(by javascript) every thing are destroyed except my interval , so when I back to the chart page , it load every thing again and setInterval method works twice on every 3 seconds which makes duplicated points on mu chart.
this is destroy method every line works except the myInterval one
destroy() { this.num=0; this.c=0; this.startLive = false; clearInterval(this.myInterval); }my problem appears just when I go to another page then back.
How can i access other component's data in vuejs at last component?
You can find the project in here. https://github.com/sahinsalih/vuejs-app
How to correctly use "scoped" styles in VueJS single file components?
Docs on VueJS states that "scoped" should limit styles to the component. But if I create 2 components with same "baz" style, it will leak from one component into another:
foo.vue
<template> <div class="baz"> <Bar></Bar> </div> </template> <style scoped> .baz { color: red; } </style>bar.vue
<template> <div class="baz">bar</div> </template> <style scoped> .baz { background-color: blue; } </style>I expect that "baz" will be different in both components. But after generating a web page I can see yje red text on blue background, that means that "foo"'s scoped style affects "bar" component. The generated code looks like this:
<div class="baz" data-v-ca22f368> <div class="baz" data-v-a0c7f1ce data-v-ca22f368> bar </div> </div>As you can see, the "leak" is intentionally generated by VueJS via specifying two data attributes into "bar" component. But why?
Show plain HTML before Vue.js loads
I have an avatar widget built with Vue.js on a sidebar in my app. It takes a split-second to load and this causes the sidebar to jank. Is there a way that I can show plain HTML in place of the Vue app while it is loading? Basically the opposite of v-cloak.
How toss Vue's transpiling to es5
The Vue cli typically transpiles es6 to es5 with babel and webpack.
Is there a Vue cli built template or template option that just transforms the .vue files correctly but does not run babel to convert the code to es5? And does not bundle?
My goal is to simply transpile the .vue files and I'll do the rest to integrate the results into my es6 + modules workflow.
Note: I tried using the "simple" cli template but couldn't find documentation on how to use it.
Vuejs 2 missing request headers on one route only
I have two components called Employees and UserProfile. The first one lists an array of users, the second one shows the user's details.
Problem is when I call the server in order to get the user details no custom headers are applied to the http call. I have no issues with the call to get multilple resources.
The headers I want to add are the headers related to the CORS requirements and one header for Authorization.
I paste here the two methods.
Method fetchData in Employees component (working):
fetchData: function () { this.$http.get( process.env.BASE_API_URL + '/api/user', { headers: { 'Authorization': 'Bearer ' + store.getters.getToken } } ).then(response => { this.employees = response.body }).catch(error => { console.log(error) }) }Headers generated:
Method fetchData in UserProfile component (NOT working):
fetchData: function () { this.user.id = this.$route.params.user_id this.$http.get( process.env.BASE_API_URL + '/api/user/' + this.user.id, { headers: { 'Authorization': 'Bearer ' + store.getters.getToken } } ).then(response => { this.user = response.body }).catch(error => { console.log(error) }) }Headers Generated:
Also the two components are called in the router as follows:
{ path: '/employees', name: 'Employees', component: Employees }, { path: '/employees/:user_id', name: 'UserProfile', component: UserProfile }Any suggestions?
Set up vue js without npm
How can I set up vue js without npm? I'm not able to install npm right now because of some reasons. Is vue.js enough? What am I missing?
P.S.: I've just started to learn vue.js and I don't want to miss something and struggle after I realize I need something that I can get only with npm.
Vue js 2 table sorting
I am trying to create a sortable table by using Vue js 2. I have already generated a table, and now just wondering how to sort this table. Thank you for your help in advance.
Please see below my code
<thead> <tr> <th class="table-header">Metric</th> <th class="table-header" v-for="metric in metricList"><a href="#">{{metric}}</a></th> </tr> </thead> <tbody> <template v-for="item in metricItem"> <tr> <td class="table-cell" style="font-weight:bold"> {{ item }}</td> <template v-for="metric in metricList"> <td class="table-cell"> {{getData[item][metric]}} </td> </template> </tr> </template> </tbody> <script> import { mapGetters, mapMutations } from 'vuex'; export default { name: 'scores', data(){ return { metricList : ["Current", "Min", "Avg", "Max"], metricItem : [ 'Happiness Score', 'Sadness Score' ] } }, computed: { ...mapGetters ([ 'getData', //getter to get data ]) } }and the data set is something like this
getData { Happiness Score { Min : 62, Max : 154, Avg : 103 Current : 100 }, Sadness Score { Min : 66, Max : 54, Avg : 73 Current : 45 },}
Hi guys, I am trying to create a sortable table by using Vue js 2. I have already generated a table, and now just wondering how to sort this table. Thank you for your help in advance.
modal is just draggable top and bottom not to the sides
I am working with vue-js-modal and i already builded my modal and it is working well except i can't move the modal to the sides, just top and bottom if i try to move it to the left or right it doesn't move.
Basicly i followed the inscructions on the github repo.
At the begin i installed the vue-js modal and in my main.js i set it up like this:
import VModal from 'vue-js-modal' Vue.use(VModal, { dialog: true })then on my component i call it like this:
<modal name="modalSection" @closed="checkClose" :draggable="true"> <component :is="getView"> </component> </modal>my hide and show is working well, so i don't need to show it here, the draggable = true just allows me to drag it top and down, i thaught it has something to do because i set bootstrap up and maybe it is inside the grid in a specific col, but i checked it and it doesn't.
Any help?
Thanks
Bootstrap nav-pills dynamic data changes in vue js 2
The jsfiddle was, https://jsfiddle.net/r6o9h6zm/2/
I have used bootstrap nav pills in vue js 2, to display the data based on the selected tab (i.e, if click over the standard non ac room, the record of that particular room need to be displayed) but here i am getting all the three rooms at instance and i have used the following to achieve it, but it gives no result.
Html:
<div id="app"> <div class="room-tab"> <ul class="nav nav-pills nav-justified tab-line"> <li v-for="(item, index) in items" v-bind:class="{'active' : index === 0}"> <a :href="item.id" data-toggle="pill"> {{ item.title }} </a> </li> </ul> <div class="room-wrapper tab-content"> <div v-for="(item, index) in items" v-bind:class="{'active' : index === 0}" :id="item.id"> <div class="row"> <div class="col-md-8"> <div class="col-md-4"> <h3>{{item.title}}</h3> <p>{{item.content}}</p> </div> </div> </div><br> </div> </div>Script:
new Vue({ el: '#app', data: { items: [ { id: "0", title: "Standard Non AC Room", content: "Non AC Room", }, { id: "1", title: "Standard AC Room", content: "AC Room", }, { id: "2", title: "Deluxe Room", content: "Super Speciality Room", }, ], } })How can i get the result with records of only selected room type and others needs to be hidden?