Software

Let's say I have a component which repeats with a v-for loop like so:

<hotel v-for="(hotel, index) in hotels"></hotel>

And my hotels array would look like so:

[ { name: false }, { name: false }, { name: true }, { name: true } ]

How could I perform an action when my v-for loop encounters the property name set to true only on the very first time it encounters this truthy property?

I know I could probably cache a property somewhere and only run something once and not run again if it has been set but this does not feel efficient.

I have this kind of objects in an array:

{ name: 'name1', url: 'http://url-1.tld' }, { name: 'name2', url: 'http://url-2.tld' }

On div click, I want to to a window.location.href to the url, but I can't seem to get the url from the data to my method.

<div v-for="person in persons" v-on:click="select($event)"></div> select: function(event) { window.location.href( ??? ) }

Anybody have suggestions?

These technologists, researchers, activists, and artists will spend the next 10 months making the Internet a better place

 

Today, Mozilla is announcing 15 new Fellows in the realms of science, advocacy, and media.

Fellows hail from Mexico, Bosnia & Herzegovina, Uganda, the United States, and beyond. They are multimedia artists and policy analysts, security researchers and ethical hackers.

Over the next several months, Fellows will put their diverse abilities to work making the Internet a healthier place. Among their many projects are initiatives to make biomedical research more open; uncover technical solutions to online harassment; teach privacy and security fundamentals to patrons at public libraries; and curtail mass surveillance within Latin American countries.

 

<Meet our Ford-Mozilla Open Web Fellows>

 

The 2017 Ford-Mozilla Open Web Fellows

Ford-Mozilla Open Web Fellows are talented technologists who are passionate about privacy, security, and net neutrality. Fellows embed with international NGOs for 10 months to work on independent research and project development.

Past Open Web Fellows have helped build open-source whistle-blowing software, and analyzed discriminatory police practice data.

Our third cohort of Open Web Fellows was selected from more than 300 applications. Our 11 2017 Fellows and host organizations are:

Sarah Aoun | Hollaback!

Carlos Guerra | Derechos Digitales

Sarah Kiden | Research ICT Africa

Bram Abramson | Citizen Lab

Freddy Martinez | Freedom of the Press Foundation

Rishab Nithyanand | Data & Society

Rebecca Ricks | Human Rights Watch

Aleksandar Todorović | Bits of Freedom

Maya Wagoner | Brooklyn Public Library

Orlando Del Aguila | Majal

Nasma Ahmed | MPower Change

Learn more about our Open Web Fellows.

 

<Meet our Mozilla Fellows in Science>

Mozilla’s Open Science Fellows work at the intersection of research and openness. They foster the use of open data and open source software in the scientific community, and receive training and support from Mozilla to hone their skills around open source, participatory learning, and data sharing.

Past Open Science fellows have developed online curriculum to teach the command line and scripting languages to bioinformaticians. They’ve defined statistical programming best-practices for instructors and open science peers. And they’ve coordinated conferences on the principles of working open.

Our third cohort of Open Science Fellows — supported by the Siegel Family Endowment — was selected from a record pool of 1,090 applications. Our two 2017 fellows are:

Amel Ghouila

A computer scientist by background, Amel earned her PhD in Bioinformatics and is currently a bioinformatician at Institut Pasteur de Tunis. She works on the frame of the pan-African bioinformatics network H3ABionet, supporting researchers and their projects while developing bioinformatics capacity throughout Africa. Amel is passionate about knowledge transfer and working open to foster collaborations and innovation in the biomedical research field. She is also passionate about empowering and educating young girls — she launched the Technovation Challenge Tunisian chapter to help Tunisian girls learn how to address community challenges by designing mobile applications.

Follow Amel on Twitter and Github.

 

Chris Hartgerink

Chris is an applied statistics PhD-candidate at Tilburg University, as part of the Metaresearch group. He has contributed to open science projects such as the Reproducibility Project: Psychology. He develops open-source software for scientists. And he conducts research on detecting data fabrication in science. Chris is particularly interested in how the scholarly system can be adapted to become a sustainable, healthy environment with permissive use of content, instead of a perverse system that promotes unreliable science. He initiated Liberate Science to work towards such a system.

Follow Chris on Twitter and Github.

Learn more about our Open Science Fellows.

 

<Meet our Mozilla Fellows in Media>

This year’s Mozilla Fellows cohort will also be joined by media producers.  These makers and activists have created public education and engagement work that explores topics related to privacy and security.  Their work incites curiosity and inspires action, and over their fellowship year will work closely with the Mozilla fellows cohort to understand and explain the most urgent issues facing the open Internet. Through a partnership with the Open Society Foundation, these fellows join other makers who have benefited from Mozilla’s first grants to media makers. Our two 2017 fellows are:

Hang Do Thi Duc

Hang Do Thi Duc is a media maker whose artistic work is about the social web and the effect of data-driven technologies on identity, privacy, and society. As a German Fulbright and DAAD scholar, Hang received an MFA in Design and Technology at Parsons in New York City. She most recently created Data Selfie, a browser extension that aims to provide users with a personal perspective on data mining and predictive analytics through their Facebook consumption.

Joana Varon

Joana is Executive Directress and Creative Chaos Catalyst at Coding Rights, a women-run organization working to expose and redress the power imbalances built into technology and its application. Coding Rights focuses on imbalances that reinforce gender and North/South inequalities.

 

Meet more Mozilla fellows. The Mozilla Tech Policy Fellowship, launched in June 2017, brings together tech policy experts from around the world. Tech Policy Fellows participate in policy efforts to improve the health of the Internet. Find more details about the fellowship and individuals involved. Learn more about the Tech Policy Fellows.

The post Mozilla Announces 15 New Fellows for Science, Advocacy, and Media appeared first on The Mozilla Blog.

I have a fairly simple Vuejs app and am just learning Vuejs. When I add or delete from a data property, I'd like some other function to happen. The code is like this:

data: { pricings: null, }, mounted(){ var somePrice = {"name":"service price", "price":"2.45"} this.pricings.push(somePrice); }, methods:{ callMe: function(){ alert("call me"); } }

I'd like when I add or delete from pricings for some other method (callMe in this case) to be called. I am sure this is possible but am not having luck finding how to do it.

please how can i migrate a dashboard that uses Vuejs in vue-cli like Vuestic inside my laravel project who uses also vuejs but with mix Thanks.

I am trying to update a Google Map automatically after a user enters values in 3 input fields: state, city, address.

I think I have most of the code to make this work but I am using a custom Vue directive that inserts the initial map. This is necessary because there is a v-if on the form that conditionally displays these inputs.

My code is as follows:

<fieldset v-if="activeStep === 1"> <strong><%= f.label :city %></strong><br> <%= f.text_field :city, class: 'form-control', 'v-model': 'city', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong><%= f.label :state %></strong><br> <%= f.text_field :state, class: 'form-control', 'v-model': 'state', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong><%= f.label :address %></strong><br> <%= f.text_field :address, class: 'form-control', 'v-model': 'address', 'v-bind:readonly': '!byAddress', 'v-on:change': 'updateLocation' %> <strong>Map</strong><br> <div id="map-container" v-map="setDefaultLocation()"> <div id='location-map'></div> </div> </fieldset>

the style:

#location-map { height: 250px; } #map-container { padding: 15px 0; }

the Vue:

Vue.directive('map', { // When the bound element is inserted into the DOM: inserted: function (el, binding) { var map = new google.maps.Map(document.getElementById('location-map'), { zoom: 15, draggable: false, panControl: false, scrollwheel: false, streetViewControl: false, fullscreenControl: false, center: binding.value, disableDoubleClickZoom: true }); var marker = new google.maps.Marker({ map: map, position: binding.value }); } }) const progress = new Vue({ el: '#listing-multistep', data: { activeStep: 0, city: '', state: '', address: '', lat: undefined, lng: undefined }, methods: { setDefaultLocation: function() { return {lat: 37.7749, lng: 122.4194} }, updateLocation: function() { var geocoder = new google.maps.Geocoder({types: ["geocode"]}); geocoder.geocode({'address': this.address + ', ' + this.city + ', ' + this.state }, function(response, status) { if (status == 'OK'){ marker.setVisible(true); map.setCenter(response[0].geometry.location); marker.setPosition(response[0].geometry.location); this.lat = response[0].geometry.location.lat(); this.lng = response[0].geometry.location.lng(); } else { marker.setVisible(false) this.lat = null; this.lng = null; } }); } } })

The problem is that the map and the marker variables are defined within the context of the Vue.directive but are not accessible from the Vue methods.

I think the code should work if I can somehow modify the map and marker objects stored in Vue.directive.

Can anyone think of a way in which I might make this work?

Thanks in advance!

I'm using Vue.js and I want to change a CSS class property. The HTML code which uses the class is the following:

<div class="fillTimerBar"></div>

And the CSS code:

.fillTimerBar { width: 100%; height: 8px; }

From there I want to change the width class property using a computed property from the Vue component.

Which would be correct way if any?

I have one component in Vue, and I want to draw two rectangles using d3. I try to set the x and y attribute of the rect element using a callback method defined in the Vue component.

But I can not access the data property set for Vue component inside this callback. Here is my component, I am getting confused further because when I hit the debugger and does console.log(this.svgHeight) in the Chrome DevTools console directly, it does log the svgHeight defined in the data.

<template> <v-container class="travel-pattern"> <v-layout> <v-flex xs12 id='svg-container'> </v-flex> </v-layout> </v-container> </template> <script> /* eslint-disable no-undef */ /* eslint-disable no-unused-vars */ export default { name: 'travel-pattern', data () { return { msg: 'Travel Pattern component', dataset: [{h: 50, w: 100}, {h: 80, w: 200}], svgHeight: 100, svgWidth: 500 } }, methods: { getRectHeight: d => { return d.h }, getRectWidth: d => { return d.w }, getRectX: (d, i) => { return (i * d.w) + 25 }, getRectY: d => { // return 50 debugger let x = this.svgHeight // here x gets undefined. return (x) }, getClickEvent: d => { debugger } }, mounted () { // 1. Draw two rectangles // 2. Each rectangle can be clicked // 3. Once clicked a pop up will appear with a text field // 4. Entering a color in the text field will change the other rectangles color // Create an SVG element var svg = d3.select('#svg-container') .append('svg') .attr('height', this.svgHeight) .attr('width', this.svgWidth) // Create a rectangle for each dataset var rectangles = svg.selectAll('rect') .data(this.dataset) .enter() .append('rect') // Actually draw the rectangles rectangles.attr('x', this.getRectX) .attr('y', this.getRectY) .attr('width', this.getRectWidth) .attr('height', this.getRectHeight) rectangles.on('click', this.getClickEvent) } } </script>

The Requirement is to append an HTML element from Array Value to DOM

template: { 0: { h1: '<h1>Hi</h1>' }, 1: { h2: '<h2>Hi</h2>' }, 2: { h3: '<h3>Hi</h3>' } }

I have a VueJS For Loop:

<div v-for="temp in template"> {{ temp.h1}} </div>

DOM :

<h1>hi</h1>

I have Rails 5.1.x and Vue.js 2.4.x; I do not mix Rails and Vue.js in the frontend – only Vue.js is used

I added the following packages:

package.json

... "devDependencies": { "jasmine": "^2.8.0", "karma": "^1.7.1", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "^1.1.0", "webpack-dev-server": "^2.6.1" }, ...

Q1: Where do I do the configuration? In webpack/test.js or some karma.conf.js file

Q2: What is in this conf file?

Q3: Do I need to install karma-webpack?

So I've recently started working with Vue js. I'm attempting to dynamically add and remove Vue nodes. It's a bit difficult to describe the issue so I've created a demo to illustrate it.

Vue.component('context', { data() { return { test: '<context></context>', //Dummy recursive data to illustrate issue child: '' } }, methods: { addChild() { this.child = this.test }, removeChild() { this.child = '' } }, computed: { dynamic() { return Vue.compile(this.child) }, style() { return { 'background-color': '#' + randHex(6) } } }, template: ` <div :style="style" @click="addChild" @click.shift="removeChild"> <component :is="dynamic"></component> </div> ` }) new Vue({ el: '#app' }) function randHex(digits) { let hex = Math.floor(Math.random() * Math.pow(16, digits)).toString(16) return '0'.repeat(digits - hex.length) + hex } html, body { height: 100%; overflow: hidden; } div { width: 90%; height: 90%; } <script src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script> <p>Click on the block to add, Shift-Click ro remove. Why does shift clicking always remove all inner blocks and not just the ones as children to the shift clicked block?</p> <div id="app"> <context></context> </div>

Above you will see that Clicking on the colored rectangles adds a inner child as intended. However when you shift click on a rectangle it not only removes its children, but ALL children! (Even ones that are parents to the current node.)

Initially I had thought the click event was "bleeding through" to the lower elements, I did however create a bit more complex test that offset the elements position to not be above one another, this still produced the same strange behavior.

Any help on understanding / resolving this issue would be greatly appreciated.

I currently have one application.js file in which I've put all my Vue.js code, as follows:

import Vue from 'vue/dist/vue.esm'; document.addEventListener('DOMContentLoaded', () => { if(document.getElementById('dashboard-topbar')) { const dashboard = new Vue({ ... do stuff }) } if(document.getElementById('map')) { const map = new Vue({ ... do stuff }) } if(document.getElementById('something-else')) { const something-else = new Vue({ ... do stuff }) } }

but I would like to separate these into their own .vue files. What's the recommended way of doing this?

Thanks!

When opening page A - then B and then going back to Page A I will see

You are running Vue in dev mode

beeing logged twice. This also causes my components to flash.

I've added

<meta name="turbolinks-cache-control" content="no-cache">

To all my pages and already use Turbolinks adapter

import TurbolinksAdapter from 'vue-turbolinks' window.Vue.use(TurbolinksAdapter);

Any Ideas on this?

I've been looking around behind the logic of when someone shall create a new component in a web application on angularjs / angular but I suppose this is more general and might apply on all component based front end frameworks.

I know that there are some principles like it should be abstract and reusable but is there any solid question which I might ask before creating a new component ?

I'm trying to upload a file (Excel sheet) from a front-end app build with VueJS to an API build with Laravel 5.5. I've some form request validation which says to me that The file field is required. So the file doesn't get uploaded to my API at all.

VueJS file upload:

onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (files.length <= 0) { return; } this.upload(files[0]); }, upload(file) { this.form.file = file; this.form.put('courses/import') .then((response) => { alert('Your upload has been started. This can take some time.'); }) .catch((response) => { alert('Something went wrong with your upload.'); }); }

this.form is a Form class copied from this project but the data() method returns a FormData object instead of a object.

The route:

FormRequest rules:

public function rules() { return [ 'file' => 'required', ]; }

If I look to the Network tab in Chrome DevTools it does seem that the request is send correctly: (image after click).

I've tried a lot of things, like sending the excel as base64 to the api. But then I couldn't decode it correctly. So now I'm trying this, but I can't solve the problem. Any help is much appreciated.

I have connected my Vue app to my Firebase Database and am able to see the resulting JSON in my Vue Dev Tools when I inspect the page on my localhost, for example:

users:Array[10] 0:Object .key:"99" City:"Richmond" Date of Birth:"9/16" Email:"fakeemail@gmail.com" Gender:"F" Home Phone:"" Ministry:"Campus" Name:"Doe, Jane" State:"VA" 1:Object 2:Object 3:Object etc.

In my App.vue file, I have the following code to output the data:

... <tbody> <tr v-for="user in users"> <td>{{ user.name }}</td> <td>{{ user.city }}</td> <td>{{ user.state }}</td> </tr> </tbody> ...

This outputs a table with the correct number of rows (10), but each table cell is blank. None of the data is printed. I'm guessing my references to the table using user.name, user.city, and user.state are not correct? Can you see if I'm doing something wrong? Thanks!

P.S. I have set the Rules to allow anyone to read/write to this database so I don't think permissions are the issue.

running my unit tests, I am always getting this info messsage even if I already added the Devtools extension in my Chrome browser ?

yves$ npm run unit > shopping-list@1.0.0 unit /Users/yves/Developments//shopping-list > cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ launcher]: Launching browser ChromeHeadless with unlimited concurrency [launcher]: Starting browser ChromeHeadless HeadlessChrome 0.0.0 (Mac OS X 10.12.6)]: Connected on socket s3ED3TVFNjuvVojoAAAA with id 22013100 INFO LOG: 'Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools'

any way to get rid of it ?

I have 2 components that each perform an AJAX requests with axios:

axios.get(this.ajaxUrl) .then((response) => {

Both of these components are hooked up to a Vuex store and I need to perform an action that ensure both async requests have succeeded.

To do this I need to have something in place which waits for both successful AJAX requests and only fires at that point.

I is not hard to do this for a single AJAX requests, I could set a property in my store like ajaxSuccess which defaults to false. When that property is being set to true I could simply use a watcher to respond to it and perform my event.

I have used this construct before and it works fine. How would I do this for multiple AJAX requests though?

This is Vue.js template

<strong>{{userdata.phone}}</strong>

When userdata.phone == null or userdata.phone == undefined, I would like to show space. for example

<strong> {{ userdata.phone | !null | !undefined }} </strong>

Is it possible?

I'm having problems with Vue values that contains underscores, like this:

{{ employee.acf.user_phone }}

I'm getting console errors telling me:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'user_phone' of undefined"

TypeError: Cannot read property 'user_phone' of undefined

However, the data is displayed in the template (it takes a while though), and Vue debugger in Chrome also shows the data correctly. This problem only seems to arise with the values that contains underscores between words. I know I shouldn't start values with underscores, but underscores between words in values should not be problematic right? What could be the problem here?

My data looks like this:

{ "employee":{ "id":1, "name":"name", "url":"", "description":"Lorem ipsum", "link":"http://localhost:8000/employee/john/", "slug":"john", "avatar_urls":{ "24":"http://0.gravatar.com/avatar/7sdb137ab174c6460503dee38a0a86cea?s=24&d=mm&r=g", "48":"http://0.gravatar.com/avatar/7sdb137ab174c6460503dee38a0a86cea?s=48&d=mm&r=g", "96":"http://0.gravatar.com/avatar/7sdb137ab174c6460503dee38a0a86cea?s=96&d=mm&r=g" }, "user_email":"useremail@gmail.com", "acf":{ "user_department":{ "term_id":3, "name":"marketing", "slug":"marketing", "term_group":0, "term_taxonomy_id":3, "taxonomy":"department", "description":"", "parent":0, "count":1, "filter":"raw" }, "user_office":"New York", "user_title":"My fancy title", } } }

Javascript/Vue looks like this:

(function($) { var employeeProfileElement = document.getElementById('vue-employee-profile'); var rest_url = WPsettings.rest_url; var nonce = WPsettings.nonce; if ( employeeProfileElement ) { var EmployeeProfile = new Vue({ el : employeeProfileElement, data() { return { employee: {}, errors: [], loading: true } }, created: function(){ employee = axios.get(rest_url + 'users/' + '1') // add authentication with nonce .then(response => { this.employee = response.data; this.loading = false; }) .catch(e => { this.errors.push(e); console.log(this.errors); }); } }); } })(jQuery);