Software
VueJS 2 input filter groups
I have an input:
<input type="text" placeholder="filter by country name" />
And a list of lists:
<ul> <li v-for="continent in continents"> {{ continent[0].continent }} <ul> <li v-for="country of continent"> {{ country.name }} ({{ country.callingCodes[0]}}) </li> </ul> </li> </ul>
Which is a list of continents and each one is a list of countries in it. How do I implement search input to show only countries I'm looking for? I tried to display a list of filtered countries but then the app displays them in each continent rather than in just appropriate one.
Vue reads all the properties of an object when using it (and triggers all the getters)
I am seeing some unexpected behavior when including an external object as data into a component in VueJs 2.0. Apparently, Vue will automatically read the properties of the object, triggering all their getters, when setting it as data in a component.
See comments in the mounted() function below.
import { web3 } from './web3/web3-load.js' Vue.component('home', { data () { return { web3: null } }, mounted () { console.log(web3) // this dont call any method of the web3 object this.web3 = web3 // this reads the properties of web3 and triggers their getter methods } })web3 is actually an instance of Web3, and is rather complex, it has several sub-elements and subfunctions.
My question is: Under which condition is it expected the Vue will automatically read all the properties of an object in the back when storing the object inside the framework? And, can this be disabled?
VueJS display grouped array of objects
I'm fetching a list of countries from the API and I want to display them in groups by subregion (continent). Like that:
API gives me a response which is an array of objects (countries) and for each object there is a key called 'subregion' - I want to group by that key. I use lodash for grouping, but maybe there is a Vue method I'm not familiar with. My JS code:
var app = new Vue({ el: '#app', data: { countries: null, }, created: function () { this.fetchData(); }, methods: { fetchData: function() { var xhr = new XMLHttpRequest(); var self = this; xhr.open('GET', apiURL); xhr.onload = function() { var countryList = JSON.parse(xhr.responseText); self.countries = _.groupBy(countryList, "subregion"); }; xhr.send(); }, }, });And HTML:
<li v-for="country in countries"> {{ country.name }} (+{{ country.callingCodes[0] }}) </li>How can I achieve what's in the picture?
Vue php laravel - multiple v-if
I have a problem, because I have to have multifle v-if in my component.
<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >Can I add a multiple condition in Vue in v-if? This is not working... I tryed also with && but this isn't go too. In documentation is nothing abiut this. Maybe You can help me?
Vue Element not being rendered
Hey I am using Vue + Laravel and using webpack.mix for package control.
Currently, stuck on a peculiar issue. I am trying to render component in my app.js file.
App.js
Vue.component('navigation',require ('./views/navigation.vue')); Vue.component('Example', require('./components/Example.vue')); //this works const app = new Vue({ el: '#app', components: { navigation } });Php Blade File where component is being rendered.
<body> <div id="app"> <div class="container"> <navigation></navigation> </div> </div>And my navigation component
<template> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria- controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>As the example component comes out of the box so it works, but the navigation component spits out this error.
app.js:814 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any help would be appreciated.
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.