Software

How to validate specific data in an object(Vee-validate) and show custom error message

Vuejs - Fri, 2017-09-01 08:31

Hey guys how to validate specific data in an object in vee-validate. I just want to validate first name and last name in an object then show custom error message becease I'm using naming convention.

I want to validate first and last name when clicking submit

data() { return { per: { strFirst: '', strMiddle: '', strLast: '' } }

Here's my code

Categories: Software

How to add dynamic/async/lazy components in VueJs

Vuejs - Fri, 2017-09-01 07:20

I want to add child components in parent components on the fly based on some conditions. I have come up with following pseudo-code

If currentView == 'a' load component A1 load component A2 ElseIf currentView == 'b' load component B2 load component B3

I know we can register all components in parent component like:

Vue.component('a1-component', require('./A1Component.vue')); Vue.component('a2-component', require('./A2Component.vue'));

But I have a lot of such child components and I need to load only the required components when needed. So loading all components initially is an overhead.

I have tried Dynamic components and async-components in Vue Js. All Dynamic components are loaded altogether so its not what I want. I am not sure how Async components can be utilized to achieve this.

I am using Laravel 5.4, VueJs 2.3.3 and Webpack.

Categories: Software

VueJS Router doesn't load the component

Vuejs - Fri, 2017-09-01 05:31

I am using VueJS Router, but the router is not loading the components.

I have About.vue and Contact.vue just with tag to test - following is how it looks like :

<template> <div> <h1>Contact page. Welcome baby!</h1> </div> </template>

This is App.vue with three router-links and router-view.

<template> <div> <h1>Routing</h1> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> <router-view></router-view> </div> </template>

This is main.js (the paths of importing files are correct)

import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' import {routers} from './router' Vue.use(VueRouter); let router = new VueRouter({mode: 'history', routers}); new Vue({ el:'#app', router, components: { 'app-home' : App } });

This is the JS file for the router. router.js (paths are correct)

import About from './About.vue' import Contact from './Contact.vue' import Home from './App.vue' export const routers=[ { path: '/' , component: Home }, { path:'/about',component:About }, { path:'/contact',component:Contact } ]

And, this is index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>router</title> </head> <body> <div id="app"> <app-home></app-home> </div> <script src="/dist/build.js"></script> </body> </html>

When I load the page, the main page looks like the following : Loaded Main page

and when I click the each nav, nothing is changed from the main page except URL. URL becomes

http://localhost:8080/contact

http://localhost:8080/about

but not loading the component I imported.

If you need more information to give advice, feel free to ask more. And if you have any clue of this issue, I appreciate if you share here.

Thank you.

Categories: Software

how to use "v-for" for adding or removing a row with multiple components

Vuejs - Fri, 2017-09-01 04:51

i have a row with 3 components(in which is a defined component 1, component 2 and component 3, as showed in my previous question: VueJs component undefined )

how can i add a row or remove a row (in which has 3 components) using v-for?

var data1={selected: null, items:["A", "B"]}; Vue.component('comp1', { template: `<select v-model="selected"> <option disabled value="">Please select</option> <option v-for="item in items" :value="item">{{item}}</option> </select>`, data:function(){ return data1 } }); <!---similar for component 2 and 3---> new Vue({ el: '#app', data: { rows:[] }, methods:{ addRow: function(){ this.rows.push({}); }, removeRow: function(row){ //console.log(row); this.rows.$remove(row); } }, });

in .html

<script src="https://unpkg.com/vue"></script> <div id="app"> <div v-for ="row in rows"> <comp1></comp1> <comp2></comp2> <comp3></comp3> <button @click="addRow">Add Row</button> <button @click="removeRow(row)">Remove Row</button> </div> </div>
Categories: Software

Statement on U.S. DACA Program

Mozilla Blog - Fri, 2017-09-01 03:57

We believe that the young people who would benefit from the Deferred Action for Childhood Arrivals (DACA) deserve the opportunity to take their full and rightful place in the U.S. The possible changes to the DACA that were recently reported would remove all benefits and force people out of the U.S. – that is simply unacceptable.

Removing DREAMers from classrooms, universities, internships and workforces threaten to put the very innovation that fuels our technology sector at risk. Just as we said with previous Executive Orders on Immigration, the freedom for ideas and innovation to flow across borders is something we strongly believe in as a tech company. More importantly it is something we know is necessary to fulfill our mission to protect and advance the internet as a global public resource that is open and accessible to all.

We can’t allow talent to be pushed out or forced into hiding. We also shouldn’t stand by and allow families to be torn apart. More importantly, as employers, industry leaders and Americans — we have a moral obligation to protect these children from ill-willed policies and practices. Our future depends on it.

We want DREAMers to continue contributing to this country’s future and we do not want people to live in fear.  We urge the Administration to keep the DACA program intact. At the same time, we urge leaders in government to enact a bipartisan permanent solution, one that will allow these bright minds to prosper in the country we know and love.

The post Statement on U.S. DACA Program appeared first on The Mozilla Blog.

Categories: Software

Getting a firebase object's key after it has been passed down as a prop in Vue

Vuejs - Fri, 2017-09-01 02:24

I am new to Firebase. I have a thought schema in the firebase database like this:

{ title: "I should learn VueJS + Firebase", body: "With VueJS+Firebase, I can take over the worlddd! Here's how I'll do it..." }

Using the ListOfThoughts.vue component, we can render our thoughts to our template like this:

<template> <div class="list-of-thoughts"> <ThoughtItem v-for="thought in thoughts" :thought="thought" /> </div> </template> <script> import firebase from './../firebase' import ThoughtItem from './ThoughtItem.vue' export default { components: { ThoughtItem }, data () { return { thoughts: [] } }, created() { const thoughtsRef = firebase.database().ref().child('thoughts'); thoughtsRef.on('value', snapshot => { this.thoughts = snapshot.val(); }, errorObject => { console.log('Error retrieving thoughts: ' + errorObject.code); }) } } </script>

Notice that we are using the ThoughtItem component which looks like this:

<template> <div class="thought"> <h1>{{thought.title}}</h1> <p>{{thought.body}}</p> </div> </template> <script> import firebase from './firebase' export default { props: ['thought'], methods: { getThoughtKey() { // How can we access the Key of this particular `thought` here? // I need the key value to access the database object. Like this: firebase.database().ref().child(key); } } } </script>

(Please check out the comments)

I am hoping to access the Key of this thought object so that I may update it. How can I do this?

Categories: Software

Javascript: (How) can you use filter to search in multiple key values of objects in an array?

Vuejs - Fri, 2017-09-01 01:07

I have an array of Wines containing an object with data for each wine:

var wines = [ { _id: '59a740b8aa06e549918b1fda', wineryName: 'Some Winery', wineName: 'Pinot Noir', wineColor: 'Red', imageLink: '/img/FortBerensPN.png' }, { _id: '59a7410aaa06e549918b1fdb', wineryName: 'Some Winery', wineName: 'Pinot Gris', wineColor: 'White', imageLink: '/img/FortBerensPG.png' }, { _id: '59a74125aa06e549918b1fdc', wineryName: 'Some Winery', wineName: 'Rose', wineColor: 'Rose', imageLink: '/img/FortBerensRose.png' }, { _id: '59a74159aa06e549918b1fdd', wineryName: 'Some other Winery', wineName: 'Rose', wineColor: 'Rose', imageLink: '/img/FortBerensRose.png' }, { _id: '59a7417aaa06e549918b1fde', wineryName: 'Some other Winery', wineName: 'Pinot Gris', wineColor: 'White', imageLink: '/img/FortBerensPG.png' }, { _id: '59a8721f4fd43b676a1f5f0d', wineryName: 'Some other Winery', wineName: 'Pinot Gris', wineColor: 'White', imageLink: '/img/FortBerensPG.png' }, { _id: '59a872244fd43b676a1f5f0e', wineryName: 'Winery 3', wineName: 'Pinot Noir', wineColor: 'Red', imageLink: '/img/FortBerensPN.png' } ]

I can figure out how to search for a wine object while specifying which key of the object to search in like this: (need to use toLowerCase as var search will be user input)

var search = 'Noir' filteredWines = function () { return wines.filter(function(wine){ return (wine.wineName.toLowerCase().indexOf(search.toLowerCase())>=0 }) // returns: // [ { _id: '59a740b8aa06e549918b1fda', // wineryName: 'Some Winery', // wineName: 'Pinot Noir', // wineColor: 'Red', // imageLink: '/img/FortBerensPN.png' }, // { _id: '59a872244fd43b676a1f5f0e', // wineryName: 'Winery 3', // wineName: 'Pinot Noir', // wineColor: 'Red', // imageLink: '/img/FortBerensPN.png' } ]

However, if var search = 'Winery 3' or var search = 'red' then it will obviously return no results as it's looking in the value of wineName of each object in the array.

So is there a way to use filter (or another method?) to search through all key values, or even better multiple specified key values and return an array of the matching objects?

Something like:

filteredWines = function () { return wines.filter(function(wine){ return ((wine.wineName.toLowerCase() && wine.wineName.toLowerCase() && wine.wineName.toLowerCase()).indexOf(search.toLowerCase())>=0 })

Or am I completely barking up the wrong tree?!

PS. I'm using Vue.js 2 so if there's a better way inside vue then I'm all ears!

Thank you!

Categories: Software

Building a form with inline editing

Vuejs - Fri, 2017-09-01 01:01

Let's say we have rendered the following template which represents a book:

<div class="book"> <h1 class="book__title" ref="title">{{book.title}}</h1> <p class="book__description">{{book.description}}</p> <button @click="activateEditMode">Edit Book</button> </div>

I would like to allow my users to quickly edit this book. When users click the Edit Book button, they should be able to edit inline. It is as if the .book card is replaced by a form. It is similar to how Facebook allow its users to edit comments inline.

I have tried replacing the <h1> and <p> elements with a corresponding <input> and <textarea> elements programatically in the activateEditMode() method:

activateEditMode() { let bookTitle = this.$refs.title; let bookTitleInput = document.createElement('input'); // but how do we programatically attach the v-model="book.title" // binding to our newly created input element here? bookTitleInput.value = this.book.title; }

How would we attach our v-model binding to our newly created input element using JavaScript?

Is this the best approach to do this?

Categories: Software

Getting the highest value of an JSON array and storing it in Data Vue

Vuejs - Fri, 2017-09-01 00:44

In my vue component i have a json array of Bids.

enter image description here

I need to get the highest bid from the array and store it into another variable.

My vue component data:

data() { return { bids: [], bid: null, veiling_id: this.id, showInput: this.auth_check, highestBid: null, } },

Getting the bids from DB and storing into bids.

mounted(){ var veilingid = this.veiling_id; var vm = this; setInterval(function(){ axios.get('/veilingen/' + veilingid + '/getbid'). then(function (response){ vm.bids = response.data; }).catch(function(error) { console.log(error); }); }, 1000); }

And now how do i loop through Bids, get the highest bid and store it into highestBid?

Also what's the best place to store the code?

Right after the AXIOS get request in the mounted() or somewhere else?

I'm sorry i'n new to Vue.

Any help is appreciated..

Categories: Software

Fire vue method from jquery on click event

Vuejs - Thu, 2017-08-31 23:45

I'm trying to append a click event to an already existing dom element.

<div class="logMe" data-log-id="{{ data.log }}"></div> ... <div id="events"></div>

I can't seem to access outside vue methods within my jquery click handler. It will throw logData is not defined.

new Vue({ el: '#events', mounted() { $('.logMe').on('click', function() { const data = $(this).data('log-id'); this.logData(data); // throws logData is not defined }); }, methods: { logData(id) { console.log(id); // never fires ... hit server }, }, });

If anyone knows of a better way to append click events to .html elements that would be great! But how can I bubble up and find my vue methods? Here's a fiddle to illustrate

Categories: Software

Data not passing in axios post request

Vuejs - Thu, 2017-08-31 23:31

I'm using axios to call a post request as follows:

axios.post(this.api+'&action='+this.action+'&wftkn='+this.wftkn, {name: 'Abcd'}). then((res)=>{ });

When I check the network tab, I don't see the data being passed in the Request header. What would be the issue in this case?

Categories: Software

Use Vue variable in style section of a component

Vuejs - Thu, 2017-08-31 23:02

Is it possible to use a variable with the style tag of a component? Basically I have imported a mixin to my style tag that accepts 2 colors to create a gradient within a class. It works great but I want this dynamic so I can set it via a database. I understand I can bind a style via inline but a gradient for a div is rather long and works way better as a mixin.

component:

<template> <section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }"> <div class="container"> <div class="columns"> <div class="column is-half"> <h2 class="is-size-4" v-html="content.title"></h2> <div class="section-content" v-html="content.description"></div> <a class="button" :href=" '/'+ content.button_link">{{ content.button_text }}</a> </div> <div class="column"> <img :src="content.image" :alt="content.title" /> </div> </div> </div> </section> </template> <script> export default { props:[ 'content' ], } </script> <style lang="scss" scoped> @import "../../sass/helpers/mixins"; .color-section{ color:red; @include diagonalGradient( content.gradient_color_one , content.gradient_color_two); } </style>

mixins

@mixin diagonalGradient($top, $bottom){ background: $top; background: -moz-linear-gradient(-45deg, $top 0%, $bottom 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, $top), color-stop(100%, $bottom)); background: -webkit-linear-gradient(-45deg, $top 0%, $bottom 100%); background: -o-linear-gradient(-45deg, $top 0%, $bottom 100%); background: -ms-linear-gradient(-45deg, $top 0%, $bottom 100%); background: linear-gradient(135deg, $top 0%, $bottom 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92fe9d', endColorstr='#00c8ff', GradientType=1 ); }
Categories: Software

Programatically change the value of the @click method

Vuejs - Thu, 2017-08-31 21:57

Here is an element with a @click handler:

<button @click="doSomething">doSomething</button>

Inside this element, how can we programatically change the value of doSomething with doSomethingElse?

Categories: Software

Vue.js template concatenate props

Vuejs - Thu, 2017-08-31 21:22

JS:

Vue.component('profile', { template: `<a v-bind:href="id"></a>`, props: ['id'] }); var app = new Vue({ el: '.app', data: { user: userobject } });

HTML:

<profile :id="user.id"></profile>

Expected result:

<a href="/profile/2">

Question: How to concatenate "/profile/" with user.id that is equal to 2?

Categories: Software

VueJs component undefined

Vuejs - Thu, 2017-08-31 20:49

I am new to . The component, comp1 doesn't appear to work.

HTML

<div id="example-2"> <comp1></comp1> </div>

Script

var data1={selected: null, items:["degradant", "impurity"]}; Vue.component('comp1, { template:'<select v-model="selected"> <option disabled value="">Please select</option> <option v-for="item in items" :value="item">{{item}}</option> </select>', data: function(){ return data1 } }); new Vue({ el: '#example-2' })
Categories: Software

How to call getter function inside getter function in Vuex

Vuejs - Thu, 2017-08-31 20:27
import Vue from 'vue' import Vuex from 'vuex' import { createModule } from 'vuex-toast' import 'vuex-toast/dist/vuex-toast.css' Vue.use(Vuex) const store = new Vuex.Store({ modules: { toast: createModule({ dismissInterval: 80000 }), app: { state: { raps: [], }, getters: { getRaps () { return store.state.app.raps }, getRapsFiltered (state, getters) { //error happens in this func return getters.getRaps.filter(state.filterFunc) } } } } }) export default store

I got error message "Uncaught TypeError: null is not a function". How to call getter function inside getter? What seems to be problem with this code?

Categories: Software

Nested select box issue changing the first one

Vuejs - Thu, 2017-08-31 18:54

I am building some logic ith 2 nested select box, basicly i load a json file and pass the data to an array in my vuejs component, the json contains the logic for the 2 select box for example for Business Developemnt i want to load in the second box Financial Proposal and Master Licence...:

{ "Business Development": [ { "text": "Financial Proposal", "key": 1 }, { "text": "Master Licence and Service Agreement", "key": 2 }, { "text": "Non-Disclosure Agreement", "key": 3 }, { "text": "Relatório de Missão", "key": 4 } ], "Configuration Management": [ { "text": "Configuration Management Plan", "key": 1 }, { "text": "Configuration Management Plan For Implementation Projects", "key": 2 }

I already accomplish something like that, the issue is that when i change the first select box, the second is empty at position 1, like this:

image

here is my code:

<template> <div class="row margin-above2 box"> <h3 class="text-center">Template</h3> <img width="70px" height="70px" class="img img-responsive" src="static/img/word.png"> <form class="box-body form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control" v-model="docData.documentType"> <option v-for="(item,index) in documentNested"> {{ index }} </option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select class="form-control" v-model="docData.documentSelection"> <option v-for="(item,index) in documentNested[docData.documentType]">{{item.text}}</option> </select> </div> </div> </form> </div> </template> <script> import data from '../../interfaceData/documentType.json' import permissions from '../../interfaceData/permissions.json' export default { name: 'app', data () { return { checked: false, documentNested: data, permissions: permissions, listItems: [], documentData: [] } },

thank you! :)

Categories: Software

How to authenticate to google OAuth2 in Vue.js?

Vuejs - Thu, 2017-08-31 18:45

As a beginner to vue.js I'm struggling with this problem for days. I know that there are few plugins for that:

vue-google-auth

and

vue-google-signin-button

and

vue-authenticate

But none of these come with good documentations, so my attempts to make use of them failed. I also could not find any tutorial on vue.js with OAuth2 authentication after extensive googling. So appreciate if someone could come up with a full working example or refer me to some complete code.

Categories: Software

VeeValidate localization "Property 'locale' does not exist on type 'Validator'."

Vuejs - Thu, 2017-08-31 18:38

I'm using VeeValidate and works perfectly for English (which is default) however if I try to use any other language I'm getting an error saying "Property 'locale' does not exist on type 'Validator'."

Here is my code:

import VeeValidate from 'vee-validate'; import french from 'vee-validate/dist/locale/fr'; Vue.use(VeeValidate); @Component export default class TestTest extends Vue { locale: any; // I have tried locale: string='fr'; nextLocale() { return this.locale === 'en' ? 'French' : 'English'; } changeLocale() { this.locale = this.$validator.locale === 'fr' ? 'en' : 'fr'; this.$validator.setLocale(this.locale); } created() { this.$validator.updateDictionary({ fr: { messages: french.messages, } }) } // other none related code... }
Categories: Software

how to stop commited mutation in Vuex

Vuejs - Thu, 2017-08-31 17:45

Is there any way in vuex to stop a mutation after commit? For redux, if next is not called in middleware, then we can say that the action is stopped

Categories: Software

Pages