Software

I am modifying hacker-news example and I added notifications component (If fetching external data goes wrong: save notification with error in vuex, after user reads it and clicks X remove it from vuex state). Looks like this:

[NOTIFY] (state, message) { state.data.push(message) }, [READ_NOTIFICATION] (state, index) { state.data.splice(index, 1) }

Problem: When data is being fetched and state is being set on server, it keeps error there in global state forever, which means that if I open new browser I will get the same old error from previous session.

Shouldn't server-side vuex state reset on every request? What am I missing?

I am developing a vuejs project with the webpack template on localhost i.e. url: localhost:8080 but I have an express server running in https://foo.bar.com

In the past, I have been making a direct request to the express server by disabling CORS, but now I am trying to make a request via proxy.

According to this API Proxying During Development I have added the following to my config/index.js

proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/': { target: 'https://foo.bar.com', changeOrigin: true, pathRewrite: { '^/': '' } }

And in my login page components/login.vue

I have something like this:

... methods: { Login(){ // trying 3 times with different urls api.request('post', 'login', {email, password}).then().catch() api.request('post', '/login', {email, password}).then().catch() api.request('post', 'https://foo.bar.com/login', {email, password}).then().catch() } }

But I get an error like this:

Failed to load https://foo.bar.com/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I'd like to use VueRx in a Typescript project.

VueRx extends the Vue prototype with several methods: https://github.com/vuejs/vue-rx#other-api-methods. Since VueRx does not ship with TS declarations, I would like to roll my own. Unfortunately I'm unable to come up with a way to extend the Vue declarations bundled with VueJs due to the way the declaration is written (classes rather than interfaces). Any suggestions?

I would like to pass data to child component but do not want to bind it when the data changes in the parent

<parent :val="myval"> <child :initialval="val"></child> </parent>

This code binds my initial value to myval, I just want it to be passed first time and do not want initialval to be reactive to changes of my val.

Can I do it without setting a local variable in mounted() function of child component?

I'm using Laravel 5.5 and VueJS for my application.

I have a form on the vue instance which allows the user to enter details of an individual and add them to a visit. When added my method adds the details from the inputs to the array of visitors.

PROBLEM: When I add a visitor to the visitors array and click remove it works great, when I import and click remove on one of the visitors it removes the wrong visitor.

My vue instance (part)

data: { visitor: {}, }

My form

<input v-model="visitor.last" class="input" placeholder="Last Name"> <input v-model="visitor.company" class="input" placeholder="Company"> <input v-model="visitor.email" class="input" placeholder="Email" type="email"> <button class="button is-primary" @click="saveVisitor">Add Visitor</button>

My Method

saveVisitor() { this.visitors.push(this.visitor); this.visitor = {}; },

This all works great and works as it should, I've now added another method for populating the list of Visitors and this is a spreadsheet import which I parse in my Laravel backend and return to my Vue instance.

METHOD FOR SPREADSHEET

submitImport() { const vm = this; var form = new FormData(); form.append('file', document.getElementById('file').files[0]); axios({ method: 'post', url: '/import/visitors', data: form }).then(function(response){ if(response.status === 200){ vm.visitors = response.data; } else { vm.loading = false; } }); },

When going through the spreadsheet I build up a array in the backend:

Laravel Controller (part)

$visitor[] = array( 'first' => $v->FirstName, 'last' => $v->LastName, 'email' => $v->Email, 'company' => $v->Company );

After the function has finished looping through the rows on the spreadsheet my controller returns the array back to the vue instance.

return response($visitor,200);

I accept the array on my Vue Instance and populate the visitors array on my vue instance with the results.

vm.visitors = response.data;

And this works great! my only problem is that when I try to remove one of the visitors from the vm.visitors array it removes the wrong one which I'm guessing is due to the keys.

see my remove method.

removeVisitor(visitor) { console.log(visitor); //this.visitors.splice(visitor,1); },

When I view the console I get the following, please note I've added some from the spreadsheet import and some via the form inputs.

It looks as though the visitors array on my vue instance has two different types of data.

When you click the ... in the top object this does return the name etc but this is different from the 2nd object which contains the data clearly?

Hi all I need some help with activating a sub menu route from a main menu route - vue-router. I have the following code in my app.js for routing. The children object has a sub-route that I want highlighted when the main menu nav link (transactions) is clicked. In my browser URL I see http://localhost:3000/transactions/transaction_history which tells me that it is going to the destination I want but I have no clue to get the sub-route active from the main nav? Any help will be great.

app.js

const routes = [ { name: 'transactions', path: 'transactions/transaction_history', component: transactions, children: [ { name: 'transaction-history', path: '/transactions/transaction_history', component: transaction_history } ] } ]

In my navigation.vue I have

<li class="u-nav__tab-item pull-left"> <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transactions' }" :to="{ name: 'transactions', path: '/transactions' }" exact>Transactions <div class="u-nav__dropdown-arrow pull-right"></div> </router-link> </li>

And in my transactions.vue template I have this link which is the first-child of the sub menu

<li class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height" :class="{ 'u-nav__tab-item--active-border-left' : $route.name === 'transaction-history' }"> <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transaction-history' }" :to="{ name: 'transaction-history', path: '/transactions/transaction_history' }" exact>Transaction History</router-link> </li>

Example of what I want when the main nav is clicked. This is the sub menu first child.

I am making a multi-step form in Rails 5 with Vue.js. I noticed that when a v-if is re-evaluated, the text in the input field gets cleared out. Is there a way to persist the info through the form steps and through other v-if evaluations?

Here's what my form looks like:

<fieldset class="listing-step" v-if="activeStep === 0"> <h2>Basics</h2> <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" /> <div class="row"> <div class="col"> <div class="form-group"> <strong><%= f.label :name %></strong><br> <%= f.text_field :name, class: 'form-control' %> </div> </div> </div> </fieldset> <fieldset class="listing-step" v-if="activeStep === 1"> <h2>Location</h2> <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" /> <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" /> <div class="row"> <div class="col"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="map_search" id="map_search_address" value="address" v-on:click="by_address = true" checked> Set by address </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="map_search" id="map_search_coords" value="coords" v-on:click="by_address = false"> Set by coordinates </label> </div> </div> </div> <div id="listing-location"> <transition name="fade"> <fieldset id="listing-location-child" name="address" v-if="by_address"> <div class="row"> <div class="col"> <div class="form-group"> <strong><%= f.label :city %></strong><br> <%= f.text_field :city, class: 'form-control', 'v-bind:readonly': '!by_address' %> </div> </div> <div class="col"> <div class="form-group"> <strong><%= f.label :state %></strong><br> <%= f.text_field :state, class: 'form-control', 'v-bind:readonly': '!by_address' %> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <strong><%= f.label :address %></strong><br> <%= f.text_field :address, class: 'form-control', 'v-bind:readonly': '!by_address' %> </div> </div> </div> </fieldset> </transition> <transition name="fade"> <fieldset id="listing-location-child" name="coords" v-if="!by_address"> <div class="row"> <div class="col"> <div class="form-group"> <strong><%= f.label :lat, 'Latitude' %></strong><br> <%= f.number_field :lat, in: -90.0..90.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %> </div> </div> <div class="col"> <div class="form-group"> <strong><%= f.label :lng, 'Longitude' %></strong><br> <%= f.number_field :lng, in: -180.0..180.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %> </div> </div> </div> </fieldset> </transition> </div> </fieldset> <fieldset class="listing-step" v-if="activeStep === 2"> <h2>Amenities</h2> <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" /> <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" /> <div class="row"> <div class="col"> <div class="form-group"> <strong>Amenities</strong><br> ... </div> </div> </div> </fieldset> <fieldset class="listing-step" v-if="activeStep === 3"> <h2>Images</h2> <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0" class="btn btn-secondary" /> <div class="row"> <div class="col"> <div class="form-group"> <strong>Images</strong><br> ... </div> </div> </div> <div class="row"> <div class="col"> <div class="actions"> <%= f.submit class: 'btn btn-success' %> </div> </div> </div> </fieldset>

and my Vue initialization:

const progress = new Vue({ el: '#vue-listing', data: { activeStep: 0, by_address: true, stepList: [ {id: 0, text: 'Basics'}, {id: 1, text: 'Location'}, {id: 2, text: 'Amenities'}, {id: 3, text: 'Images'} ] } })

Thanks in advance!

I'm sending 2 api requests before render the page:

const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter: function (to, from, next) { function getProfile() { return axios.get('user/get-profile?access-token=1', {responseType: 'json'}); } function getPhotos() { return axios.get('photos?access-token=1', {responseType: 'json'}); } axios.all([getProfile(), getPhotos()]) .then(axios.spread(function (profile, memes) { console.log(profile, memes); next(vm => { vm.setProfile(profile); vm.setPhotos(photos); }) })); }, methods: { setProfile: function (response) { Profile.attributes = response.data; console.log(Profile.attributes); }, setPhotos: function (response) { Profile.photos = response.data; console.log(response); }, } };

The problem is rendering occures before setProfile and setPhotos methods. How to correct render my component?

I'm attempting to add Foundation for Sites to my first Vue.js project that is setup with the Vue CLI.

The website runs however the Karma+Phantomjs unit test suite is emitting this error:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR SyntaxError: Invalid character: '`' at webpack:///~/foundation-sites/js/foundation.util.core.js:24:0 <- index.js:10362

I believe this is related to webpack and

Here's an overview of the code changes I've made...

Main.js

import jQuery from 'jquery' window.jQuery = jQuery window.$ = jQuery import Foundation from 'foundation-sites' window.Foundation = Foundation

Hello.vue

<template> ... </template> <script> export default { name: 'hello', mounted () { this.dropdownMenu = new Foundation.DropdownMenu($('#dropdown-menu'), { // These options can be declarative using the data attributes hoverDelay: 300 }) }, data () { return { msg: 'Welcome to Your Vue.js App' } }, destroyed () { this.dropdownMenu.destroy() } } </script>

test/unit/index.js

import Vue from 'vue' import Foundation from 'foundation-sites' window.Foundation = Foundation // ... auto-generated unit tests

I want to close vuejs modal from child component inside this modal. Case:

<modal name="some-modal"> <some-component></some-component> </modal>

Inside SomeComponent i want to close some-modal. Is it good approach ? Can it be done better way ? Please adivse, Regards

I have VirtualBox Machine on windows 10, I have Laravel backend api, and Vue for frontend. Now when I run Vue with npm run dev, it starts my Vue app on localhost port 8080, and my Laravel app is on vue.dev/api/quote (this is for post url)

I am using axios and when in my axios.post put my laravel url, I am getting errors in the browser console.

axios.post('http://vue.dev/api/quote', {content: this.quoteContent}) .then( (response) => console.log(response) ) .catch( (error) => console.log(error) );

I can access on ubuntu laravel url and it works. Cant find where is a problem in vue, because when i hit submit button on vue app, I just keep getting error.

In a vuejs project I use the vue eventbus like this. Emitting this event:

icontag.addEventListener('click', testFunction, false) function testFunction () { console.log('click1') Events.$emit('click2') }

And receiving it in another module I get as output one click1, but multiple click2's. It looks very much like every time there is some code which requires webpack import/ export it triggers an additional result on the eventbus of the same event..., or something..., since in chrome devtools the related code close to the click2's has code like __WEBPACK_IMPORTED_MODULE_5__util nearby.

Any idea what is going on?

I am trying to catch vue.js custom event within one component, but it's not catching. What's the problem?

myEventFunc: function() { this.myEvent = true; }, clickedFunc: function() { this.clicked = true; this.$emit('myevent'); }

JSFiddle Example: https://jsfiddle.net/ucean0rh/1/

I am learning vue+laravel. I want to pass value from one component to other component? I have used vue router for routing.

Here is the code for first and second component.

<template> <div class="modal-body"> <div> <div class="row"> <div class="card col-md-4 square mr-2 mx-auto"> <label class="my-auto text-white text-center">1 hour</label> </div> <div class="card col-md-4 square ml-2 mx-auto"> <label class="my-auto text-white text-center">2 hours</label> </div> </div> <div class="row"> <div class="card col-md-4 square mr-2 mt-2 mx-auto"> <label class="my-auto text-white text-center">3 hours</label> </div> <div class="card col-md-4 square ml-2 mt-2 mx-auto"> <label class="my-auto text-white text-center">Unlimited</label> </div> </div> </div> <button class="btn btn-default float-right mt-2" v-on:click="selectPerson">Next</button> </div> </div> </template> <script> export default{ props:['selectedOption'], methods:{ selectPerson(){ this.$router.push({name:'SelectPersons'}); } } } </script>

second component

<template> <div class="modal-body"> <div class="text-center">Start booking your ticket now!</div> <div class="text-center"> <label>Step 2</label> </div> <div class="text-center"> <label>For how many persons?</label> </div> <div> <input type="number" class="form-control" name="numberOfPersons" placeholder="Enter number of persons here"> </div> <div> <button class="btn btn-default float-right mt-2" v-on:click="selectTimeSlots">Next</button> </div> </div> </template> <script> export default{ methods:{ selectTimeSlots(){ this.$router.push({name:'SelectTimeSlot'}); } } } </script>

Can anybody help me do it?

I'm creating bootstrap modals with vue js and i following tutorial but with a few tweaks, and it works just fine but now when i have long modals i got some issue about scrolling page, since it is only scrolling page behind the modals but not the modals

here is my modal.vue component

<template> <div class="modal-mask" @click="close" v-show="created"> <transition name="modal" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown" mode="out-in" v-on:enter="beforeEnter" v-on:after-leave="afterLeave" > <div class="modal-dialog" :class="size" v-if="show" @click.stop> <div class="modal-content"> <div class="modal-header" :class="color"> <button type="button" class="close" @click="close">&times;</button> <h6 class="modal-title"> <slot name="title"></slot> </h6> </div> <div class="modal-body"> <slot></slot> </div> <div class="modal-footer"> <slot name="button"></slot> </div> </div> </div> </transition> </div> </template> <script> export default{ props: ['show','color','size'], data(){ return{ created: false, } }, mounted(){ document.addEventListener("keydown", (e) => { if (this.show && e.keyCode == 27) { this.close(); } }); }, methods: { close(){ this.$emit('close'); }, beforeEnter(){ this.created = true }, afterLeave(){ this.created = false } } } </script> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); transition: opacity .3s ease; } </style>

and to i just need to import this modal.vue component into any page that i needed.

so how to fix this scrolling issue?

I recently moved from Vue.js to Quasar (which is just a set of components for Vue.js applications)

I have two different applications, one written using vue-cli and one with quasar-cli. The one with vue-cli has all test structure in place, I can just execute npm run unit and it finds all my mocha tests and run them.

I have then copied the same structure into my quasar project. It builds and run in dev mode correctly but when I execute this command:

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

I get these errors:

• Typescript emitted no output for ..\src\sfc.d.ts
• Module parse failed: ..\src\index.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.
• Module not found: Error: Can't resolve 'quasar/dist/quasar.start.css' in '..\src'

Somehow I am missing some configuration which is needed before I start karma. Any clue? In Vue.js using Typescript the same configuration is working just fine.

after running correctly this unit test, the coverage is incomplete as I can see in lcov-report/src/vuex/actions.js.html .., only

return api.addNewShoppingList(shoppinglist)

is executed (1x), not the code inside the .then() block

thanks to anyone who can give me some feedback on this issue? ( if it's an issue.. or normal behavior )

actions.spec.js

import actions from '@/vuex/actions' import * as types from '@/vuex/mutation_types' describe('actions.js', () => { var server, store, lists, successPost successPost = {'post': true} beforeEach(() => { // mock shopping lists lists = [{ id: '1', title: 'Groceries' }, { id: '2', title: 'Clothes' }] // mock store commit and dispatch methods store = { commit: (method, data) => {}, dispatch: () => { return Promise.resolve() // static method }, state: { shoppinglists: lists } } sinon.stub(store, 'commit') // mock server server = sinon.fakeServer.create() server.respondWith('POST', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPost)) }) server.autoRespond = true }) afterEach(() => { store.commit.restore() server.restore() }) describe('createShoppingList', () => { it('should return successful POST response', () => { let newList = { title: 'new list', id: '3' } actions.createShoppingList(store, newList).then((resp) => { expect(resp.body).to.eql(successPost) }) }) }) })

actions.js

import * as types from './mutation_types' import api from '../api' import getters from './getters' export default { populateShoppingLists: ({ commit }) => { return api.fetchShoppingLists().then(response => { commit(types.POPULATE_SHOPPING_LISTS, response.data) }) }, createShoppingList: (store, shoppinglist) => { return api.addNewShoppingList(shoppinglist) .then(() => { store.commit(types.ADD_SHOPPING_LIST, shoppinglist) store.dispatch('populateShoppingLists') }) }, }

api/index.js

import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) const ShoppingListsResource = Vue.resource('http://localhost:3000/' + 'shoppinglists{/id}') export default { addNewShoppingList: (data) => { return ShoppingListsResource.save(data) } }

mutations.js

import * as types from './mutation_types' import getters from './getters' import _ from 'underscore' export default { [types.POPULATE_SHOPPING_LISTS] (state, lists) { state.shoppinglists = lists }, [types.ADD_SHOPPING_LIST] (state, newList) { if (_.isObject(newList)) { state.shoppinglists.push(newList) } } }

mutations.types

export const POPULATE_SHOPPING_LISTS = 'POPULATE_SHOPPING_LISTS' export const ADD_SHOPPING_LIST = 'ADD_SHOPPING_LIST'

getters.js

import _ from 'underscore' export default { getLists: state => state.shoppinglists, }

console

mymac:lcov-report 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 PhantomJS with unlimited concurrency launcher]: Starting browser PhantomJS [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket -XTe5WWPBnSfAtg_AAAA with id 73492961 actions.js ... createShoppingList ✓ should return successful POST response PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 13 of 13 SUCCESS (0.086 secs / 0.034 secs) TOTAL: 13 SUCCESS =============================== Coverage summary ================== Statements : 64.44% ( 29/45 ) Branches : 50% ( 2/4 ) Functions : 81.25% ( 13/16 ) Lines : 64.44% ( 29/45 ) ================================================================

lcov-report/src/vuex/actions.js.html

import * as types from './mutation_types' import api from '../api' import getters from './getters' export default { createShoppingList: (store, shoppinglist) => { **1× return api.addNewShoppingList(shoppinglist)** .then(() => { store.commit(types.ADD_SHOPPING_LIST, shoppinglist) store.dispatch('populateShoppingLists') }) }, }

On October 10, EU lawmakers will vote on a dangerous proposal to change copyright law. Mozilla is urging EU citizens to demand better reforms.

 

On October 10, the European Parliament Committee on Legal Affairs (JURI) will vote on a proposal to change EU copyright law.

The outcome could sabotage freedom and openness online. It could make filtering and blocking online content far more routine, affecting the hundreds of millions of EU citizens who use the internet everyday.

Dysfunctional copyright reform is threatening Europe’s internet

Why Copyright Reform Matters

The EU’s current copyright legal framework is woefully outdated. It’s a framework created when the postcard, and not the iPhone, was a reigning communication method.

But the EU’s proposal to reform this framework is in many ways a step backward. Titled “Directive on Copyright in the Digital Single Market,” this backward proposal is up for an initial vote on October 10 and a final vote in December.

“Many aspects of the proposal and some amendments put forward in the Parliament are dysfunctional and borderline absurd,” says Raegan MacDonald, Mozilla’s Senior EU Policy Manager. “The proposal would make filtering and blocking of online content the norm, effectively undermining innovation, competition and freedom of expression.”

Under the proposal:

• If the most dangerous amendments pass, everything you put on the internet will be filtered, and even blocked. It doesn’t even need to be commercial — some proposals are so broad that even photos you upload for friends and family would be included.

 

• Linking to and accessing information online is also at stake: extending copyright to cover news snippets will restrict our ability to learn from a diverse selection of sources. Sharing and accessing news online would become more difficult through the so-called “neighbouring right” for press publishers.

 

• The proposal would remove crucial protections for intermediaries, and would force most online platforms to monitor all content you post — like Wikipedia, eBay, software repositories on Github, or DeviantArt submissions.

 

• Only scientific research institutions would be allowed to mine text and datasets. This means countless other beneficiaries — including librarians, journalists, advocacy groups, and independent scientists — would not be able to make use of mining software to understand large data sets, putting Europe in a competitive disadvantage in the world.

Mozilla’s Role

In the weeks before the vote, Mozilla is urging EU citizens to phone their lawmakers and demand better reform. Our website and call tool — changecopyright.org — makes it simple to contact Members of European Parliament (MEPs).

This isn’t the first time Mozilla has demanded common-sense copyright reform for the internet age. Earlier this year, Mozilla and more than 100,000 EU citizens dropped tens of millions of digital flyers on European landmarks in protest. And in 2016, we collected more than 100,000 signatures calling for reform.

Well-balanced, flexible, and creativity-friendly copyright reform is essential to a healthy internet. Agree? Visit changecopyright.org and take a stand.

The post A Copyright Vote That Could Change the EU’s Internet appeared first on The Mozilla Blog.

I want to do this: when I click the option,I send a request 。when the request success, I set the value with my clicked. when the request success fail,I keep the value origin ,before I clicked.

A plugin I use creates dynamic html and I want to add a dynamic background-color using a hex passed via props.

This is the html in my component

<template> <div class="pagination" slot="pagination"></div> </template>

Generates dynamic HTML of this

<div class="pagination" slot="pagination"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> </div>

The components receives props

props: ['primaryBgColor']

I can obviously see the color in the template if I write

<template> <div> {{ this.primaryBgColor }} </div> </template>

However when I write a style within the component like

<style> .swiper-pagination-bullet { background-color: {{ this.primaryBgColor }} } </style>

Webpack returns an error saying I have a CSS syntax error. Any ideas?