Software
How to validate specific data in an object(Vee-validate) and show custom error message
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: '' } }How to add dynamic/async/lazy components in VueJs
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 B3I 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.
VueJS Router doesn't load the component
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 :
and when I click the each nav, nothing is changed from the main page except URL. URL becomes
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.
how to use "v-for" for adding or removing a row with multiple components
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>Statement on U.S. DACA Program
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.
Getting a firebase object's key after it has been passed down as a prop in Vue
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?
Javascript: (How) can you use filter to search in multiple key values of objects in an array?
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!
Building a form with inline editing
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?
Getting the highest value of an JSON array and storing it in Data Vue
In my vue component i have a json array of Bids.
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..
Fire vue method from jquery on click event
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
Data not passing in axios post request
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?
Use Vue variable in style section of a component
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 ); }Programatically change the value of the @click method
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?
Vue.js template concatenate props
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?
VueJs component undefined
I am new to vue.js. 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' })How to call getter function inside getter function in Vuex
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?
Nested select box issue changing the first one
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:
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! :)
How to authenticate to google OAuth2 in Vue.js?
As a beginner to vue.js I'm struggling with this problem for days. I know that there are few plugins for that:
and
and
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.
VeeValidate localization "Property 'locale' does not exist on type 'Validator'."
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... }how to stop commited mutation in Vuex
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