Software

So I'm trying to import my SCSS file with all vars and mixins definitions to all components I have. File name for defs is _defs.scss:

@import "styles/defs";

I also used alias in webpack to define where to look for styles folder:

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', assets: path.resolve(__dirname, "src/assets/"), styles: path.resolve(__dirname, "src/styles/") } }

But for some reason webpack still throws error telling he can't find the import file.

Where am I wrong?

In knockout.js I was able to do the following:

function Person() { this.firstName = ko.observable('Foo') this.lastName = ko.observable('Bar') this.fullName = ko.pureComputed(() => { return this.firstName() + this.lastName() }) } var p = new Person() console.log(p.fullName()) // FooBar

Is there any way to add reactive computed properties on objects which are not a component data in Vue?

I'm building a small application in Vuejs where I'm having a list of year presented in a table something like this:

<tr v-for="model in yearsTable"> <td class="text-left"> <div class="i-checks"> <label> <input type="checkbox" :value="model.id" :checked="model.active" @click="yearCheck(model)"> <i></i>{{ model.name }}</label> </div> </td> </tr>

and a computed property to have the data something like this:

computed: { yearsTable: function () { if(this.yearModel) { return this.yearModel.map(d=> ({name: d.name, id: d.id, active: d.is_active ? true : false})) } } }

I've a function in which I want to check the is_active count and I want to have only 3 to be checked at a time. I mean if more than 3 is checked then it should alert so I have a method function something like this:

yearCheck(model) { var count = 0; var ele = this.yearModel.findIndex(t => t === model) if(ele.is_active = 0) { ele.is_active = 1 } else { ele.is_active = 0 } for(var j=0; j<this.yearModel.length; j++) { if(this.yearModel[j].is_active === 1) { count++; } } if(count>3) { ele.is_active = 0 alert('You already have 3 selected years') } else { //Do other function } }

I'm getting an error of:

Uncaught TypeError: Cannot create property 'is_active' on number '-1'

I have this three components - main, question, and questionOption. What I want is to clear the checked radio button on the questionOption from the main component startNewGame method. When I'am only using Main component resetting the radio button is just simple. I just assign the model to an empty array. Can someone help me on this. By the way, Im using onsen ui for the customize tags ans removed some unnecessary methods and data. Here is my code.

Main.vue

<div class="quiz-background"> <question v-for="(question, $indexParent) in randomQuestions" :question="question['doc'].question" :choices="question['doc']['choices']" :indexParent="$indexParent" :correctAnswer="question['doc'].correctAnswer" @collectedAnswer="pushToAnswers" > </question> <section style="margin:16px"> <v-ons-button modifier="cta" @click="submit" v-show="!isDone" >Submit </v-ons-button> </section> </div> <script> export default { data() { return { dialogVisible: false, resultDialogVisible: false, questionnaires: [], chosenAnswers: [], correct: [], total: 0, isDone: false } }, methods: { pushToAnswers(answer) { this.chosenAnswers.push(answer); }, submit() { //will compare chosenAnswers to correct answer } }, startNewGame() { //will reset answered questions this.getQuestionaire(); this.chosenAnswers = []; this.resultDialogVisible = false; this.total = 0; this.isDone = false; }, components: { Question } } </script>

Question.vue

<question-option v-for="(choice, key, $index) in choices" :choice="choice" :indexParent="indexParent" :index="$index" :letter="key" :name="'question-' + indexParent" v-model="selectedValue" @change="changeValue" > </question-option> <script> import QuestionOption from './QuestionOption.vue'; export default { data() { return { selectedValue: '' } }, props: ['question', 'indexParent', 'choices', 'chosenAnswer'], methods: { changeValue(newValue) { this.selectedValue = newValue; this.$emit('collectedAnswer', this.selectedValue); } }, components: { QuestionOption } }

Question.vue

<v-ons-list-item :modifier="longdivider" :key="letter" tappable > <label class="left"> <v-ons-radio :name="name" :input-id="indexParent + '-' + index" v-model="chosenAnswer" > </v-ons-radio> </label> <label class="center" :for="indexParent + '-' + index" > {{ letter }} . {{ choice }} </label> </v-ons-list-item> <script> export default { props: ['choice', 'indexParent', 'index', 'name', 'letter'], computed: { chosenAnswer: { get() { return this.letter; }, set() { this.$emit('change', this.letter); } } } } </script>

Please see my code that I'am not sure what I'm doing wrong?. I want to get new JSON data when the id="select1" has changed and then send the parameter to id="select2" and then id="select2" will be show data in option.

var appZone = new Vue({ el: '#el', data() { return { options: [], list:[], selected:'' } }, mounted() { var self = this axios.get('https://www.iam-tour.com/wp-json/tour-api/v1/search/0') .then(function (response) { console.log(response); self.options = response.data; }) .catch(function (error) { console.log(error); }); }, methods: { onChange: function (){ axios.get('https://www.iam-tour.com/wp-json/tour-api/v1/search/'+this.selected) .then(function (response) { //console.log(response); self.list = response.data; console.log(list) }) .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"> <select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" > <option v-for="item in options" v-bind:value="item.id" > {{ item.title }} </option> </select> <span>Selected: {{ selected }}</span> <select id="select2" class="custom-select" > <option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option> </select> </div>

I have a SPA that is built on vuejs. When a user is logged in via API, the token is stored in local storage.

I need a global solution which will logout and prompt the user when the token is no longer valid. At the moment, I get "invalid token" error when accessing private API endpoints.

How do I rig axios so that ALL response of invalid tokens will trigger the logout/prompt code?

I'm using Vue-cli to create vue project with webpack template. how to run it with https in development using: npm run dev?

I have a form right now I built in vue. The issue I am having is that when I attach the file I can console out the atachement and see its an object but using vue tools its just listed as file.

Template

<input class="file-input" type="file" @change="onFileChange">

Method

onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.form.resume = files[0]; console.log(files[0]); },

Then the Vue inspector:

I have got this in my html code

<div class="pl_wrapper"> <div class="options_pl"> <input type="button" @click="optionButtonClicked" class="option_button_pl" value="List"> <input type="button" @click="optionButtonClicked" class="option_button_pl" value="Add a language"> </div> {{show2}} </div>

And this in my vue.js

const ProgrammingLanguages = new Vue({ el:".pl_wrapper", data:{ name: "aa", show1: false, show2: false }, methods: { optionButtonClicked(){ var indexOfClicked = index(event.target,event.target.className); var equalIndexOfDiv = getOnIndex(indexOfClicked,"pl_divs") $(".options_pl").hide(); show1 = (indexOfClicked==0) ? true : false show2 = (indexOfClicked==1) ? true : false } } });

Now when i click option_button_pl i expect {{show2}}'s to also change from false to true and vice versa.But alas that doesn't Jsfiddle: happen.https://jsfiddle.net/3akfzcyf/

I would like to dynamically determine the appropriate http method and make a single api call. However an exception is thrown when I call the method.

I expect that I am doing something wrong rather than this being a vue-resource bug. Would anyone have any advice? Thanks

For example:

let method = this.$http.post if (this.model.id) { method = this.$http.put } method( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) })

A javascript TypeError is thrown with message "this is not a function"

The code below works, but a bit long winded.

if (this.model.id) { this.$http.put( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) }) } else { this.$http.post( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) }) }

I try to bind image source in my v-for loop. My array is filled by functions and isn't static.

My code looks that:

<section class="section"> <div class="container"> <div v-for="match in matches" class="card"> <img :src="match.avatar" alt=""> </div> </div> </section>

And

created() { ipcRenderer.send('get:all:champions') ipcRenderer.send('summoner:recent:matches:request') ipcRenderer.on('summoner:recent:matches:response', (event, matches) => { matches.splice(-15, 15) // -15, 15 this.matches = matches for (let match in matches) { ipcRenderer.send('matches:champion:avatar:request', { element: match, championId: matches[match].champion }) } ipcRenderer.on('matches:champion:avatar:response', (event, data) => { this.matches[data.element].avatar = data.avatar }) }) }

I get error in console and any pic doesn't show. Error:

(node:9696) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 42): Error: Request failed with status code 429

I hope you can help me =)

Is it possible to dynamically assign a directive? I would like to assign success or error based on a variable named type. I currently do this (Which I would like to replace):

v-snackbar(v-if="type === 'success'", success, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }} v-btn(flat, @click.native="snackbar = false") v-icon close v-snackbar(v-if="type === 'error'", error, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }} v-btn(flat, @click.native="snackbar = false") v-icon close

I have created a mixins file called as urlMixin.js as show below,

module.exports = { data() { return { url: 'http://localhost:3000' }; } }

I have a component called as profile.vue in which I have imported the mixin file. The profile.vue file looks like this,

import axios from 'axios'; import urlMixin from './../../mixins/urlMixin'; export default{ data() { return{ } }, created: function(){ }, mixins : [ urlMixin ], methods:{ getInfo: function(){ axios.get('this.url/profile') .then(response =>{ }) .catch(e => { this.errors.push(e); }) } } }

I want to be able to replace the url value in the Profile.vue with the url value present in urlMixin.js file, like how it is shown in the profile.vue file. Is there a way using which I can achieve this?

How do I bind the properties of a form that is generated dynamically?

<div class="form-group" v-for="col in colInfo"> <template v-if="col.Type == 'text'"> <label class="badge badge-info">{{col.Field}}</label> <textarea class="form-control form-control-md" rows="3" v-on:change="updateInsertMap(col.Field)"></textarea> </template> <template v-else> <label class="badge badge-info">{{col.Field}}</label> <input type="text" class="form-control form-control-md" v:on:change="updateInsertMap(col.Field)"> </template> </div>

When the submit button is clicked, I need to get all the values before sending it to the server? How could I keep track of the values?

I have included vue 1.0.18 min.js in a script tag in the html page.

The specialText line doesn't work.

var tagApp; window.onload = function () { /* Vue Js App here */ tagApp = new Vue({ el: '#app', data: { title: 'Title', chars: [{ name: "Jarred", attack: 15, health: 70, special: "Block", blockVal: 5, specialText: "Passive: Blocks "+ tagApp.chars[0].blockVal +" Damage." // line above: here it doesn't work // gives: "can't get chars of undefined" }, { name: "John" }] } }); // close app alert(tagApp.chars[0].blockVal); // here it works getBlockVal(); // here it also works } // close window.onload function getBlockVal() { var arr = [{ name: "henry", description: "blocks " + tagApp.chars[0].blockVal + " dmg." }]; alert(arr[0].description); }

I've also tried the following inside of specialText:

this.blockVal gives undefined.

this.parent.blockVal gives undefined.

this.chars[0].blockVal says chars is undefined.

tagApp.chars[0].blockVal says tagApp is undefined.

Please help.

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.