Software

I am having trouble establishing a communication between the parent and child. I am trying to share the parent's value with the child.

The parent:

<div class="col-md-9" id="dina-right"> <!-- PARENT --> <button type="button" class="btn btn-info" v-on:click="insert"> Insert </button> <-- CHILD --> <div id="insert-box" v-bind:show-insert-box="enableInsert" v-bind:class="{'d-none': showInsertBox}"> </div> </div>

Child component:

static insertBox() { new Vue({ el: '#insert-box', data: { table: "", colInfo: [], showInsertBox: false }, props: ['enableInsert'], methods: { } }); }

The parent component:

new Vue({ el: '#dina-right', data: { enableInsert: false, }, methods: { insert() { this.enableInsert = true; } } });

I want to enable and disable the d-none in the class based upon the parent's value enableInsert. I am trying to bind enableInsert with the child variable showInsertBox. What mistake am I making here?

Michael DeAngelo joins the Mozilla leadership team this week as Chief People Officer.

As Chief People Officer, Michael is responsible for all aspects of HR and Organizational Development at Mozilla Corporation with an overall focus on ensuring we’re building and growing a resilient, high impact global organization as a foundation for our next decade of growth and impact.

Michael brings two decades of experience leading people teams at Pinterest, Google and Pepsico. Earlier in his career Michael held a number of HR roles in Organization Development, Compensation, and People Operations at Microsoft, Merck and AlliedSignal.

At Pinterest, Michael built out the majority of the HR function. One of the most important teams was the Diversity and Inclusion function which is recognized as one of the best in the industry. Two of his proudest moments there were being the first company ever to set public diversity goals. and growing new hires from under-represented backgrounds from 1% to 9% in one year.

Michael brings a global perspective from his tenure at Google, where for four years he led HR for the Europe/Middle East/Africa region based in Zurich, Switzerland. At Google he also led the HR team supporting 10,000 employees for Search, Android, Chrome, and Google+. Prior to Google, Michael was Vice President of HR at Pepsico leading all people functions for the Quaker Foods global P&L.

“Having spent so much of my career in technology, I have long been an admirer of Mozilla and the important contributions it has made to keeping the Internet open and accessible to all. This is an exciting time for Mozilla as we’re about to deliver a completely revitalized Firefox, we’re ramping investments in new emerging technologies and we’re making important strides in fighting for a healthier Internet platform for all. I am excited to come on board and support the continued development and growth of the organization’s talent and capabilities to help us reach our goals.”

Michael will be based in the Bay Area and will work primarily out of our San Francisco office.

Welcome Michael!

chris

The post Welcome Michael DeAngelo, Chief People Officer appeared first on The Mozilla Blog.

Home.vue:

<form class="book-room" action="#"> <div class="col-md-3"> <div class="form-left-search-book"> <p>Room Type</p> <select v-model="roomtype" class="form-control"> <option class="form-control size-font" v-for="room in items">{{ room.title }}</option> </select> </div> </div> <div class="col-md-3"> <div class="form-date-book-search date-space-left"> <p>Arrival Date</p> <input class="form-control" id="arrive" v-model="from" type="text"> </div> </div> <div class="col-md-3"> <div class="form-date-book-search date-space-right"> <p>Departure Date</p> <input class="form-control" id="depart" v-model="to" type="text"> </div> </div> <div class="col-md-2 text-left"> <div class="form-left-search-submit"> <router-link :to="{ name: 'check', params: { roomtype: this.roomtype, from: this.from, to: this.to }}" ><button class="btn btn-info" type="submit">Check</button></router-link> </div> </div> </form>

Route.js:

{ path: '/check/:roomtype/:from/:to', name: 'check', component: FrontEndCheck },

Jquery:

$(document).ready(function () { var date = new Date(); var currentMonth = date.getMonth(); var currentDate = date.getDate(); var currentYear = date.getFullYear(); $('#arrive').datepicker({ minDate: new Date(currentYear, currentMonth, currentDate), dateFormat: 'dd/mm/yy' }); $('#depart').datepicker({ minDate: new Date(currentYear, currentMonth, currentDate), dateFormat: 'dd/mm/yy' }); });

Here i am having a form filling up room type, arrival , departure date and there is a check named button in which if i click over it, then it will redirect to the next page by taking up the room type, arrival , departure date that have been selected..

When i use type="date" <input class="form-control" id="arrive" v-model="from" type="date"> and selecting from bootstrap datepicker, everything works fine and no issue with that but i cant use that datepicker because there the disabling of past date was not available, so here i need to implement a jquery for it, in which i changed the type="text" and gave it like <input class="form-control" id="arrive" v-model="from" type="text"> and function i have mentioned in jquery code, it is showing the error,

[vue-router] missing param for named route "check": Expected "from" to match "[^\/]+?", but received ""

I searched a lot but unable to find a solution for it, kindly make a help for me to fix this issue.

How could a child component pass its value to the parent component? Here is my child component:

Javascript:

new Vue({ el: '#table-list', data: { tableList: ['Empty!'], tableSelected: "" }, methods: { getTableList() { axios .get('/tables') .then(tableList => { this.tableList = tableList.data; }) .catch(e => console.warn('Failed to fetch table list')); }, selectTable(table) { this.tableSelected = table; } }, mounted() { this.getTableList(); } });

HTML:

<div id="table-list"> <p v-for="table in tableList"> <i class="fa fa-table" aria-hidden="true"></i>&nbsp; <span class="text-primary" v-on:click="selectTable(table)"> {{ table }} </span> </p> </div>

When on click, selectTable is called, I want to show the value in its parent component? i.e I need to pass tableSelected property to the parent component. How could I do this?

I'm getting this error for each html tag of Vuetify. I installed Vuetify using

npm install --save-dev vuetify

In my main.js I have :

const Vue = require("vue"); const Vuetify = require("vuetify"); const tracksList = require("./track-list.vue"); Vue.use(Vuetify); trackList = new Vue({el: "#track-list", template: "<tracksList/>", components: {tracksList}});

The file track-list.vue is :

<template src="../templates/track-list-component.html"></template> <script src="./track-list.js"></script>

In my template track-list-component.html, here is the part which uses Vuetify :

<div class="track-name-row" v-on:click="expandTrack(project.structure.tracks.indexOf(track))" @contextmenu="show"> <li class="track-color-viewer"></li> <span>{{"Track "+project.structure.tracks.indexOf(track)}}</span> <img class="item-view" src="../assets/img/ic_view.svg" alt="view"> </div> <v-menu offset-y v-model="showMenu" :position-absolutely="true" :position-x="x" :position-y="y"> <v-list> <v-list-tile> <v-list-tile-title>test</v-list-tile-title> </v-list-tile> </v-list> </v-menu>

The track-list.js is a simple Vue component :

module.exports = { name: "track-list", components: { [ ... ] }, data() { return { [ ... ] }; } }

For importing Vuetify, is there other things to do than installing Vuetify with npm and using Vue.use(Vuetify) in main.js? I am a bit lost and sad, this lib seems to be really great.

I am trying to write a post api in nodejs and using vuejs as front end frame work and using vue-resource to access apis . This is my submit function on the front end side.

validateBeforeSubmit() { var self = this; this.$validator.validateAll().then(result => { if (result) { self.data = self.name; console.log(this.data) this.$http.post('/api/add_level',self.data).then(function(res){ this.status = res.body console.log(this.status); this.largeModal=false; // eslint-disable-next-line alert('From Submitted!'); }) return; }

This my code on the server side.

app.post('/api/add_level',function(req,res,err,data){ console.log(data); })

How to mapping the JSON Object with the variable? I am not sure that my coding is correct or not. I just begin study in Vuejs. Please see my coding I want to map jSON data to the 'country' variable.

var appZone = new Vue({ el: '#el', data() { return { country: [], shoppingItems: [ {name: 'apple', price: '10'}, {name: 'orange', price: '12'} ] } }, mounted() { axios.get('/wp-json/tour-api/v1/search/11361') .then(function (response) { console.log(response); this.country = response.json(); }) .catch(function (error) { console.log(error); }); } }) <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="el"> <ul> <li v-for="item in country"> {{ item.country_id }} - {{ item.title }} </li> </ul> </div>

Here is my JSON data

I am searching a solution where I can replace a object content with other in a array of objects.

The thing is, I don't know what my function will pass, so I can't pass the values inside as keys directly, so the reference won't be copied, is there any way I can assign the value directly without passing the reference? I know that objects pass references and not values, but is there a way to do that?

I tried two ways:

state.document["atributes"].splice(state.document["atributes"][state.currentIndex],1,section);

and

state.document["atributes"][state.currentIndex] = section

where my state.document["atributs"] is my array, and the state.currentIndex the index where I want to replace the element inside my array.

what happens at the moment is that my object can be a Table a paragraph etc.

if the objects are the same it replaces the content :/

Any help with this? Thank you

I have my project written in Laravel + Vue.js. (It is not my project, but I have to improve it. I can not show code because I have NDA so i will only ask. It is API in laravel + front in laravel + vue. I committed that project, updated two .env's and installed it using: composer update npm install php artisan serve

But there is problem because where I am on the page (127.0.0.1:8000) I see blank page. Here's some console:

When I am doing 127.0.0.1:8000/js/app.js I see:

That doesn't works even when I have 777 chmod's on all project.

And command npm install every time says "114 installed 10 updated". Why this notice is not updating to 0?

Can u help me? What can I try?

<select v-on:change="WebserviceCall()"> <option v-for:="option in options"> </option> </select>

Actually the on-change is triggered when the options are created in the v-for and i dont want this to happen, is there another semantic option or should i use a some kind of VueJSIsReady function in my javascript ?

There are two teams, each has a logo and name, and for the first team, we display the logo, and then the name, and for the second, the name, and then the logo. I wanted to put the logo and name in the component, and handle this situation like this :

<div class="team_container"> <template v-if="isTeam1Flag"> <img :src="/logo_1.png" alt="Logo Team 1"> <span >Team 1</span> </template> <template v-else> <span >Team 2</span> <img :src="/logo_2.png" alt="Logo Team 2"> </template> </div>

Can you tell me if there is a better solution for this task?

I have the following line of code in my .vue template for an input field component which I want to check for whether an input field is a checkbox and bind a class on the input field if it is true.

In the component it looks like this:

<input :type="type" class="o-pf-input" :class="!isCheckbox ? 'o-pf-input--cbx' : ''" :placeholder="placeholder" :name="placeholder" :value = 'value' @input="value = $event.target.value">

Where it has :class="!isCheckbox ? 'o-pf-input--cbx' : ''"

in my data option I have this:

data: function() { return { value: '', checkbox: 'o-pf-input--cbx', isCheckbox: false } },

So it is kind of working but it applies the class to all input fields which is what I don't want to achieve. It should only add the class when the attribute type is a checkbox.

I have a problem, I really confused about how to get value from form binding vue js. I have tried --> https://vuejs.org/v2/guide/forms.html#Select. But I always getting error such as --> Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. What's wrong with my code ?

Here is my code :

data : function() { return { data : { options : {}, selected : '' } }; }, methods : { Search : function(){ var vm = this; var types = [ { "id" : "id", "value" : "ID" }, { "id" : "title", "value" : "Title" }, { "id" : "category", "value" : "Category" }, { "id" : "username", "value" : "Nama User" } ]; vm.data.options = types; console.log(vm.data.selected); } }

Here is my html code :

<select v-model="selected" class="form-control sl"> <option v-for="option in data.options" v-bind:value="option.id"> {{ option.value }} </option> </select>

I am using vue-date-range date picker here i am using disabledStart and disabledEnd props but its not disabling date on view.for disabling date it required an object i am passing it but it doesn't work.I don't know what was the correct object format for disabling the dates.

Any help would be appreciated Plugin link https://www.npmjs.com/package/vue-date-range

Here is HTML

<div class="form-group form-group-lg"> <label>When is it required?</label> <daterange class="calendar" :sync-range.sync="range" :disable-days-before-today="disableDaysBeforeToday" :days-disabled-start="disableStart" :days-disabled-end="disableEnd" :lang="lang" @change="onChange"> </daterange> </div>

JS

<script> import { DateRange } from 'vue-date-range'; export default { data() { return { lang: 'en', disableDaysBeforeToday: true, disableStart: { startDate:moment()}, disableEnd: { endDate: moment().add(7, 'days') }, range: {} } }, components: { 'daterange': DateRange }, methods: { onChange(range) { console.log("START", range.startDate._d); console.log("END", range.endDate._d); }, disable() { console.log("on button click disable dates"); this.disableStart._d = new Date('2017-08-25').toString() } } } </script>

After that I uploaded site in xampp's virtualHost axios methods stopped working.(but site is working well)

httpd-vhosts:

NameVirtualHost *:80 <VirtualHost *:80> DocumentRoot C:\xampp\htdocs\zbudWew\public ServerName localhost <Directory C:\xampp\htdocs\zbudWew\public> Order allow,deny Allow from all </Directory> </VirtualHost>

.env:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=zbudwew DB_USERNAME=root DB_PASSWORD=

example axios method:

axios.post('api/news/', this.info).then(response => { this.news.unshift(response.data.info); this.info = {title: '', body:''}; console.log(response.data); }, response => { this.errors = response.data; });

On my localhost:8000 address site and adding content is working good, but if I am trying add content on my 192.168.0.199 address I am getting errors:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined" found in ---> <Info> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\Info.vue <NewsManagement> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\NewsManagement.vue <Root>

Which is werid, because:

axios.get('api/news').then(response => { this.news = response.data.news; });

is working correctly. Could you guys give me an advice how to solve this?

I have a list as component and it contains hidden popup like facebook. For example you click any item on list, and it shows popup about the item here is my interface that I mentioned

It runs properly with v-if / v-show attributes. But works only on item list. If the user wants to click any location on the interface. I'm checking like following lines:

popupListener(event) { let element = $(event.target), allCard = $(document).find('.popup'), pointer_popup = element[0].closest('.popup'), pointer_card = element[0].closest('.card-item'); if ((!pointer_popup && !pointer_card) || (pointer_popup && pointer_card)) { allCard.hide(); } }

Also this listens in ready method of VueJS. This is not good solution. I wonder and look for better solution with VueJS.

I have just started to learn VueJS 2 and the more questions I have the harder it becomes.

The idea is that I have a sample problem with an array of objects, where I want to sort the array by "votes" property, which can be dynamically updated for each separate element. I want to sort my list by votes dynamically. Thus the question is how can I do that without doing weird code.

In angular you will do something like

for candidate in candidates | orderBy: 'votes'

but in here I could of though only of something like

v-for="(value, index, key) in sorted_candidates"

where in .js I'll have

computed : { sorted_candidates() { return this.candidates.sort((a, b) => { return b.votes - a.votes;}); } }

So my question would be if there is a more elegant way to solve this problem? Note: I am sorting on object property.

I am using vuejs with vuetify a material design support for vuejs, but I am confused as to how I can add custom css styles to material design without breaking a convention of the material design itself.

It is like bootstrap where we can call .row{} and override the styling or does it differ in some ways.

How can I loop over data set via ajax in my component methods? The problem is that when I try to call a method to perform the loop on component mounted(), the data isn't there yet. How can I tell my vue component to wait for the ajax data to arrive to execute the function? The parent makes the ajax call, so I can't stick it in the .done() function.

Vue.component('sidebar', { props: ['people'], template: ` <div id="sidebarContain" v-if="this.people"> <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id"> {{person.first_name + ' ' + person.last_name}} </div> </div> `, methods: { isCheckedIn(person) { return person.reg_scan == null ? true : false; }, displayName() { //this is the function I want to run when ajax data is done and passed from parent to child for (var i = 0; i < this.people.length; i++) { console.log(this.people[i]); } } }, mounted() { this.displayName(); } }); var app = new Vue({ el: '#main', data: { people: [] }, methods: { loadPeople() { $.ajax({ method: 'POST', dataType: 'json', url: base_url + 'users/getParticipants/' + event_id }).done(data => { this.people = data; }); }, setRefresh() { setInterval(() => { console.log("Getting People"); this.loadPeople(); }, 10000); } }, mounted() { this.loadPeople(); this.setRefresh(); } }); <div id="app"> <sidebar :people="people"></sidebar> </div>

While looping on array of sales , i need to capture the object of which salesPerson === "bar" and print its sellValue outside the v-for block.

Of course i can't access the array in hard-coded way. i have to assume that the position of the object i'm looking for is random.

also, i can't add another loop on top of the one loop that already exist here. (v-for is a loop obviously).

i need way to do achieve it.

here is an example component:

<template> <div id="app"> <!-- i need to print here the sellValue of 'bar' --> <p v-for="(sell,index) in sales" :key="index">{{sell.sellValue}}</p> </div> </template> <script> export default { name: 'app', data() { return { sales: [ { salesPerson: 'foo', sellValue: 1 }, { salesPerson: 'bar', sellValue: 2 } ] } } } </script>