Software

I have a parent component which has multiple child components

<grid> <cell></cell> <cell></cell> <cell></cell> </grid>

My cell components emit an event with payload saying it is being edited this.$emit('editing',cellId)

I know I can capture the event like <cell @editing="do something"></cell> or capture using EventBus.$on('editing'), I do not want to use root listener as well this.$root.$on('editing')

But because its the parent component, how can i listen to event of 'editing' when the parent component is mounted

mounted: function(){ this.$on('editing',dosomething) }

why am I not able to add listen when the parent component is mounted?

As i failed miserably at using C3 with vue, i went for vue-chart.js, which seems promising..

My problem is.. i want to do a dispatch to the store to fetch my api data, and use this as the datasource of my pie chart, and i haven't found out how to do this either through docs or googling..

My guess is that by using "mapgetters" in computed, and using "$store.dispatch()" in mounted, the data is not ready when the chart is rendered..

Anyone know how to do this ?

See my example below :

<script> import * as types from '../store/mutationtypes' import { mapGetters, mapActions } from 'vuex' import { Pie } from 'vue-chartjs' export default Pie.extend({ mounted () { this.$store.dispatch('getStatisticsForOrderStatus'), this.renderChart({ labels: [this.statOrderstatus.key], // labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: 'Ticketstatus', backgroundColor: '#f87979', data: [this.statOrderstatus.doc_count] } ] }) }, computed: { ...mapGetters(["statOrderStatus"]) }, }) </script> Data looks like this : { "key": "Fornyet ikke lastet ned", "doc_count": 7793 }, { "key": "Bekreftet levert til mobil", "doc_count": 5239 }, { "key": "Betaling kansellert", "doc_count": 1035 },

in my vuejs program i am trying to make a global instance of an alert/notification system. This would be at the rootmost instance of the app. and then my plan was to push to an array of objects and pass that through to the component. This only half works.

in my app.vue i have

<template> <div id="app"> <alert-queue :alerts="$alerts"></alert-queue> <router-view></router-view> </div> </template>

in my main.js i have

exports.install = function (Vue, options) { Vue.prototype.$alerts = [] }

and my alert_queue.vue is

<template> <div id="alert-queue"> <div v-for="alert in alerts" > <transition name="fade"> <div> <div class="alert-card-close"> <span @click="dismissAlert(alert)"> &times; </span> </div> <div class="alert-card-message"> {{alert.message}} </div> </div> </transition> </div> </div> </template> <script> export default { name: 'alert', props: { alerts: { default: [] } }, data () { return { } }, methods: { dismissAlert (alert) { for (let i = 0; i < this.alerts.length; i++) { if (this.alerts[i].message === alert.message) { this.alerts.splice([i], 1) } } } } } </script>

I can add to this list now by using this.$alerts.push({}) and i can see they are added by console.logging the results.

The problem is that the component doesn't recognise them unless i manually go in and force it to refresh by changing something in code and having webpack reload the results. as far as i can see, there is no way to do this programatically.... Is there a way to make prototype components be watched like the rest of the application?

I have tried making the root most file have a $alerts object but when i use $root.$alerts.push({}) it doesn't work because $root is readonly.

Is there another way i can go about this ?

I'm trying to use Vue devtools via the chrome extension, but it's saying that "Vue.js not detected" even though Vue is loaded on the page.

I'm on Chrome version 59.0.3071.115 and have the most up to date extension. I'm developing locally and have a custom hostname e.g. dev-site.com:3000.

I'm running the development version of Vue.js

Is it possible to use VusJS Components into Moqui Screens? I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.

The need comes from the following scenario: While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.

If there's no way to use vue, maybe you can help me with my concrete issue.

Mozilla, the non-profit behind the Firefox browser, is excited to support Rooftop Films in bringing a memorable evening of film and discussion to The Courtyard of Industry City, in beautiful Brooklyn, New York on Saturday, July 29 starting at 8 PM ET. As a part of Rooftop Films Annual Summer Series, Hitrecord will premiere a film produced by Joseph Gordon-Levitt about staying safe online.

Mozilla believes the Internet is the most fantastically fun, awe-inspiring place we’ve ever built together. It’s where we explore new territory, build innovative products and services, swap stories, get inspired, and find our way in the world. It was built with the intention that everyone is welcome.

Right now, however, we’re at a tipping point. Big corporations want to privatize our largest public resource. Fake news and filter bubbles are making it harder for us to find our way. Online bullies are silencing inspired voices. And our desire to explore is hampered by threats to our safety and privacy.

“The Internet is a vast, vibrant ecosystem,” said Jascha Kaykas-Wolff, Mozilla’s Chief Marketing Officer. “But like any ecosystem, it’s also fragile. If we want the Internet to thrive as a diverse, open and safe place where all voices are welcome, it’s going to take committed citizens standing tall to protect it. Mozilla is proud to support the artists and filmmakers who are raising awareness for Internet health through creativity and storytelling.”

Joseph Gordon-Levitt, actor and producer of “Too Much Information” said, “Mozilla is really a great organization, it’s all about keeping the Internet free, open and neutral. Being a Firefox user and a Mozilla donator myself, I was flattered when Mozilla knocked on hitRECord’s door and asked us to do this.”

Dan Nuxoll, Program Director at Rooftop Films said, “In such a pivotal year for the Internet, we are excited to be working with Mozilla in support of films that highlight with such great detail our relationship with the web. As a non-profit, we are thrilled to be collaborating with another non-profit in support of consumer education and awareness about issues that matter most.”

Joseph Gordon-Levitt, actor and filmmaker said, “Mozilla is really a great organization, it’s all about keeping the Internet free, open and neutral — ideas very near and dear to my heart. I was flattered when Mozilla knocked on hitRECord’s door and asked us to collaborate.”

Join us as we explore, through short films, what’s helping and what’s hurting the Web. We are calling the event, “Net Positive: Internet Health Shorts.” People can register now to secure a spot.

Featured Films:
Harvest – Kevin Byrnes
Hyper Reality – Keiichi Matsuda
I Know You From Somewhere – Andrew Fitzgerald
It Should Be Easy – Ben Meinhardt
Lovestreams – Sean Buckelew
Project X – Henrik Moltke and Laura Poitras
Too Much Information – Joseph Gordon Levitt & hitRECord
Price of Certainty – Daniele Anastasion
Pizza Surveillance – Micah Laaker

Saturday, July 29
Venue: The Courtyard of Industry City
Address: 274 36th Street (Sunset Park, Brooklyn)
8:00 PM: Doors Open
8:30 PM: Live Music
9:00 PM: Films Begin
10:30 PM: Post-Screening Discussion with Filmmakers
11:00 PM: After-party sponsored by Corona Extra, Tanqueray, Freixenet, DeLeón Tequila, and Fever-Tree Tonic

In the past year, Mozilla has supported the movement to raise awareness for Internet Health by launching the IRL podcast, hosting events around the country, and collaborating with change-makers such as Joseph Gordon-Levitt to educate the public about a healthy and safe Internet environment.

About Mozilla

Mozilla has been a pioneer and advocate for the open web for more than 15 years. We promote open standards that enable innovation and advance the Web as a platform for all. Today, hundreds of millions of people worldwide use Mozilla Firefox to experience the Web on computers, tablets, and mobile devices. For more information, visit www.mozilla.org.

About Rooftop Films

Rooftop Films is a non-profit organization whose mission is to engage and inspire the diverse communities of New York City by showcasing the work of emerging filmmakers and musicians. In addition to their annual Summer Series – which takes place in unique outdoor venues every weekend throughout the summer – Rooftop provides grants to filmmakers, rents equipment at low-cost to artists and non-profits, and supports film screenings citywide with the Rooftop Films Community Fund. At Rooftop Films, we bring underground movies outdoors. For more information and updates please visit their website at www.rooftopfilms.com.

The post Mozilla Announces “Net Positive: Internet Health Shorts” – A Film Screening About Society’s Relationship With The Internet appeared first on The Mozilla Blog.

I am trying to create a Vue.js component which would allow me to load (using PreloadJS) and display various EaselJS canvas experiments. The Vue.js component:

1. Gets created with a HTML canvas and 2 divs for experiment scripts and the EaselJS library
2. created lifecycle hook: Loads the EaselJS library using PreloadJS (included in the main HTML file)
3. Stores the EaselJS lib files in the #creatjLib div
4. Afterwards it loads the experiment script files and stores them in #gameAssets

Here is the component:

<template> <div class="fullscreen"> <canvas id="canvas" class="fill"></canvas> <div id="createjsLib" class="hidden"></div> <div id="gameAssets" class="hidden"></div> </div> </template> <script> import {createjsList} from '../../assets/lists/games.js' import {manifests} from '../../assets/conf.js' export default { props: ['id'], data() { return { game: createjsList[this.id], queue: new createjs.LoadQueue() }; }, methods: { onLibrariesLoaded() { var lib = this.queue.getResult("EaselJS"); var libCont = document.getElementById("createjsLib"); libCont.innerHTML = ""; libCont.appendChild(lib); document.getElementById('gameAssets').innerHTML = ""; var manifest = (this.game.manifest) ? this.game.manifest : '/static/games/' + this.id + '/manifest.json'; this.queue = new createjs.LoadQueue(); this.queue.on("complete", this.onGameAssetsLoaded); this.queue.on("fileload", this.onGameAssetLoaded); this.queue.loadManifest(manifest); }, onGameAssetLoaded(e) { var type = e.item.type; if (type == createjs.LoadQueue.CSS || type == createjs.LoadQueue.JAVASCRIPT) { document.getElementById('gameAssets').appendChild(e.result); } }, onGameAssetsLoaded() { console.log('Assets Loaded'); } }, created() { var manifest = manifests.createjs; this.queue.on("complete", this.onLibrariesLoaded); this.queue.loadManifest(manifest); console.log('created'); } } </script> The Problem

My problem is that this process only works once. I can load the EaselJS library and the experiments files only once, the scripts get correctly executed but once I navigate (vue-router, history mode) home for example and then back to the experiment it fails to even load the library again and crashes in the created lifecycle hook.

Error in created hook: "TypeError: Cannot read property 'observeArray' of undefined"

I tried using the destroyed and beforeDestroy lifecycle hooks to cancel, delete, reset the PreloadJS queue but nothing I tried works. The error seems to happend somewhere in Vue.js but I am not sure why or how to fix this. I have checked the manifest url and it points to the correct static JSON manifest file.

Any ideas what's going on? What have I missed here? Any advice/help will be appreciated

I am a beginner with vuejs and now i am facing an issue:

I have an object in one page, and, when clicked in a "detail" button to view details of this object i want to open another route with detailed infos about this object.

My problem is that i don't want to use route params to send the object to another view in another route because this will show the object in the url neither i want to use localStorage to storage the object.

I was reading about vuex and props, but i don't think i understand really well how to use them in my case :/ , can anybody help me?

Thanks in advance :)

Repo is available here: https://github.com/systemnate/vuetesting

I created a rails app by running the command rails _5.1.2_ new vuetesting --webpack=vue

And then added mocha and chai yarn add mocha chai --save-dev

And then created a test directory by running mkdir test/javascript

Then I created a spec file to run... touch app/javascript/App.spec.js

And pasted in the following code:

const chai = require('chai') const expect = chai.expect describe('first test', () => { it('is true', () => { expect(true).to.equal(true) }) })

And added the following to package.json

"scripts": { "test": "mocha test/**/*.spec.js --recursive" }

Now previous yarn test passes. Let's try to implement a Vue specific test.

I run the command yarn add avoriaz mocha-webpack --save-dev

And then modified package.json to use mocha-webpack:

"scripts": { "test": "mocha-webpack test/**/*.spec.js --recursive" }

yarn test still passes.

Now I want to test the single file component. To start with, I added to the top of my test so it looks like this:

import Vue from 'vue'; import App from '../../app/javascript/packs/App.vue'; const chai = require('chai') const expect = chai.expect describe('first test', () => { it('is true', () => { expect(true).to.equal(true) }) })

And then run yarn test and get the following output

yarn test v0.27.5 $ mocha-webpack test/**/*.spec.js --recursive ERROR in ./app/javascript/packs/App.vue Module parse failed: /Users/natedalo/Ruby/vuetesting/app/javascript/packs/App.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <template> | <div id="app"> | <p>{{ message }}</p> @ ./test/javascript/App.spec.js 2:0-53 error Command failed with exit code 1.

Any thoughts on what could be going wrong?

I just started to learn Vue, and I can't understand what for is props? I have simple array in php :

$vegetables = ['apple', 'strawberry', 'banana'];

Now I want it in my blade ( laravel ), but I don't know how to do foreach now with Vue... I tryed to do like this:

<html> <head> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-7"> <ol> <vegetable-item v-for="item in vegetables" </vegetable-item> </ol> </div> </body> <script> Vue.component('#app7', { props: ['array'], template: '<li>{{ item.text }}</li>' })

It completely doesn't work....

Im struggling to implement something which I think is pretty easy.

In my Vue app I loop through a list. Each list item is a child component. Each list item has an expand/collapse button. That works fine, but I want to be able to close all open items from the parent and I don't seem to be able to get that working as I would like.

The expand/collapse is controlled via a variable called isOpen so

<div v-if="isOpen">Something here</div>

I have tried using a computed property instead of the isOpen and passing props but that issue is I think it needs to act more like an event.

Consider three open list items. If the list items are controlled by a prop, and setting it to false closes the items, when an item is reopened, the prop is still false so therefore will not work a second time. I know I could change it back on the parent, but it seems wrong.

Whats the best way to accomplish this?

I am moving Vue components up in the dom if I am on mobile since I want to use positioning absolute and want to make sure I am not within a relative container.

if (this.mobile) { this.$el.parentNode.removeChild(this.$el); document.getElementById('vue').appendChild(this.$el); } else { // Place the element back at it's original location. }

This code is placed with a debounced resize method so it also works on resizing of the window.

It works fine but when I start out on mobile and resize back to desktop I need to get the original dom location of where the component was first initialized.

This might be a Javascript only question but how can I get the original location of the exact dom position of this component so I can place it back again?

Edit

I am saving the initial parent element with:

this.parent = this.$el.parentElement;

This does not guarantee the right order in the parent element though when I append the element back to the parentElement again.

Vue.component('rating-edit', { template:` <form> <input v-model="rating.title" type="text"> <textarea v-model="rating.remark">{{rating.remark}}</textarea> <button type="button" @click="submit"> Save </button> </form>`, props:['rating'], methods: { submit: function submit () { let rating = this.rating; this.$emit('submit', rating); console.log('submit was emitted'); } } }); const aRating = { title: 'title', remark: 'remark' }; let vueApp = new Vue({ el: '#rating-edit-container', data: { rating: aRating } }); vueApp.$on('submit', function(rating) { console.log('vue on submit', rating); }); <script src="https://vuejs.org/js/vue.min.js"></script> <div id="rating-edit-container"> <rating-edit :rating="rating"></rating-edit> </div>

In a legacy frontend code I'd like implement a vue based componentized form and have it return the data on submit.

This is the component code. Please note the submit function firing this.$emit('submit', rating);

let result = { props:['rating'], methods: { submit: function submit () { let rating = this.rating; this.$emit('submit', rating); console.log('submit fired'); } } }; export default result;

And now in the legacy code, I am waiting for the events:

import Vue from 'vue'; import ratingEditVue from './rating-edit.vue'; Vue.component('rating-edit', ratingEditVue); const aRating = { title: 'title', remark: 'remark' }; let vueApp = new Vue({ el: '#rating-edit-container', data: { rating: aRating } }); vueApp.$on('submit', function(rating) { console.log('vue on submit', rating); });

As far as I understand the Vue events this should work. But $on('submit', handlerFunction) just never gets called.

Addendum:

I've fiddled the example. I apologize for not having done this in the first place.

I'm new to Vue.js, and I'm triing to create a shop app with vue & webpack. I have some products in a json file, and rendering them with a v-for.

When clicking on "Add to cart" button, it should put the product number, and the selected quantity to an array.

How can I properly increase quantity for a specific product? So far I have the following:

<template> <div v-for="(product, index) in products" > <div><img :src="product.product_image" /></div> <div> <input type="number" min="0" v-model="qty[index]" /> <button @click="addToCart(product.id, qty[index])">Add to cart</button> </div> </div> </template> <script> import productList from '../products.json'; export default{ name: 'shop', data(){ return { products: productList, cartElements: [], qty: [], } }, props: [ 'itemsInCart' ], methods:{ addToCart(product_id, quantity){ this.cartElements.push( { "id" : product_id, "quantity" : quantity, } ); console.log(this.cartElements); }, }, } </script>

The result is ok, but the input fields are acting weird.

E.g.: If I increase the third product's input, it sets the first and second product input to 1, and only then sets the third input to the desired number.

So I want to implement GraphQL into NuxtJs.

Now I need to have a provider into the root element, but NuxtJs doesn't give me this option.

How would I inject the apolloProvider into the root Vue element?

What I'm trying to accomplish:

https://github.com/Akryum/vue-apollo

const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) new Vue({ el: '#app', apolloProvider, render: h => h(App), })

What I've tried:

Creating a plugin: /plugins/graphql.js:

import Vue from 'vue' import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client' import VueApollo from 'vue-apollo' // Create the apollo client const apolloClient = new ApolloClient({ networkInterface: createBatchingNetworkInterface({ uri: 'http://localhost:3000/graphql' }), connectToDevTools: true }) // Install the vue plugin Vue.use(VueApollo) const apolloProvider = new VueApollo({ defaultClient: apolloClient }) export default apolloProvider

Importing the apolloProvider in .nuxt/index.js:

... import apolloProvider from '../plugins/graphql' ... let app = { router, store, apolloProvider, _nuxt: { defaultTransition: defaultTransition, transitions: [ defaultTransition ], ...

Unfortunately this provides me with 2 problems; each time the server restarts, my code in the .nuxt directory is wiped. Besides that it gives me the following error:

TypeError: Cannot set property '__APOLLO_CLIENT__' of undefined at new ApolloClient (/current/project-nuxt/node_modules/apollo-client/src/ApolloClient.js:112:37) at Object.<anonymous> (plugins/graphql.js:6:21) at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0) at Object.module.exports.__webpack_exports__.a (server-bundle.js:1060:76) at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0) at Object.<anonymous> (server-bundle.js:1401:65) at __webpack_require__ (webpack:/webpack/bootstrap 8a1e0085b0ebc1e03bd0:25:0) at server-bundle.js:95:18 at Object.<anonymous> (server-bundle.js:98:10) at evaluateModule (/current/project-nuxt/node_modules/vue-server-renderer/build.js:5820:21) at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5878:18 at /current/project-nuxt/node_modules/vue-server-renderer/build.js:5870:14 at Nuxt.renderToString (/current/project-nuxt/node_modules/vue-server-renderer/build.js:6022:9) at P (/current/ducklease-nuxt/node_modules/pify/index.js:49:6) at Nuxt.<anonymous> (/current/project-nuxt/node_modules/pify/index.js:11:9) at Nuxt.ret [as renderToString] (/current/project-nuxt/node_modules/pify/index.js:72:32) at Nuxt._callee2$ (/current/project-nuxt/node_modules/nuxt/dist/webpack:/lib/render.js:120:24) at tryCatch (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:65:40) at GeneratorFunctionPrototype.invoke [as _invoke] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:303:22) at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/current/project-nuxt/node_modules/regenerator-runtime/runtime.js:117:21) at step (/current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30) at /current/project-nuxt/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

I have problem with migratiing filters from vue 1 to vue 2, I created exactly what I need here (highlighting text which match the input text):

Vue.component('demo-grid', { template: '#grid-template', props: { filterKey: String }, data: function () { return { searchParams: [ { key: '' } ], suggestions: [ { message: 'Foo' }, { message: 'Bar' }, { message: 'Foobar' }, { message: 'pikachu' }, { message: 'raichu' } ] } }, filters: { highlight: function(words, query){ var iQuery = new RegExp(query, "ig"); return words.replace(iQuery, function(matchedTxt,a,b){ return ('<span class=\'highlight\'>' + matchedTxt + '</span>'); }); } } }) // bootstrap the demo var demo = new Vue({ el: '#demo' })

https://jsfiddle.net/t5ac1quc/23/ VUE-1 resource
https://jsfiddle.net/t5ac1quc/25/ VUE-2 resource

I would be very grateful, for all the answers

Starting from the following simple reddit-like example : https://jsfiddle.net/coligo/g7mu5ndz/

Vue.component('post', { template: "#post-template", props: ['post'], data: function () { return { upvoted: false, downvoted: false }; }, methods: { upvote: function () { this.upvoted = !this.upvoted; this.downvoted = false; }, downvote: function () { this.downvoted = !this.downvoted; this.upvoted = false; } }, computed: { votes: function () { if (this.upvoted) { return this.post.votes + 1; } else if (this.downvoted) { return this.post.votes - 1; } else { return this.post.votes; } } } }); var vm = new Vue({ el: "#app", data: { posts: [{ title: "A post for our reddit demo starting at 15 votes", votes: 15 }, { title: "Try out the upvoting, it works, I promise", votes: 53 }, { title: "coligo is the bomb!", votes: 10 }] } });

I'd like to :

• a) Display the total number of upvotes (under the list of posts, in the #app div
• b) For each post, display the percentage of total upvotes it has gained

Is this possible without managing each post state in the parent?

Here is my sample code using vuejs 2 framework:

a= {_data:{x: 2}} b = new Proxy(a, { get(target, name){ if(name !== '_data') return target._data[name] return target._data; }, set(target, name, value){ if(name !== '_data') target._data[name] = value else target[name] = value; return true; } }) v = new Vue({ el: '#app', data:{ c: b } });

It works properly on Chrome an Firefox both in android and desktop version, But when I run it on IOS, vue won't detect changes of data. Is this because of IOS support of ES6 Proxy??

Here is a jsfiddle link of above sample code: https://jsfiddle.net/aminfa92/j1oxcuLq/

I'm trying to use Blade in my Vue file carousel-signUp.vue

Like:

<template> <div> <form action="{{route('dump')}}" method="POST" > /* Some code here...*/ </form> </div> </template>

But in the end I'm getting an error.

The compiler can't understand the difference between Vue syntax and Blade syntax. How can I define Blade syntax in Vue files?

Or, does anyone have an idea how to use {{route('dump')}} value in my vue file?

I am trying to bind classnames into the class attribute with vuejs looping through an array like this:

Here I pass the method call in a :class="paymentTypeClass(value)" to bind to the vue template like so:

<li v-for="card in paymentType" class="o-pf-list__item" :class="paymentTypeClass(value)"> {{ card }} </li> new Vue ({ el: '#app', data: { paymentType: ['paymentType1', 'paymentType2', 'paymentType3', 'paymentType4', 'paymentType5'] }, methods: { functionName: function(value) { var i = 0; for (i in this.paymentType) { value = 'o-pf-list__item--' + this.paymentType[i]; } return value + ' pull-left'; } } });

The result is that it only prints out the last index value in the array so it is actually overwriting. Why is this? Please help.

Logs in the console:

o-pf-list__item--bitcoin app.js:51663 o-pf-list__item--credit app.js:51663 o-pf-list__item--debitcard app.js:51663 o-pf-list__item--eft app.js:51663 o-pf-list__item--masterpass app.js:51663 o-pf-list__item--bitcoin app.js:51663 o-pf-list__item--credit app.js:51663 o-pf-list__item--debitcard app.js:51663 o-pf-list__item--eft app.js:51663 o-pf-list__item--masterpass app.js:51663 o-pf-list__item--bitcoin app.js:51663 o-pf-list__item--credit app.js:51663 o-pf-list__item--debitcard app.js:51663 o-pf-list__item--eft app.js:51663 o-pf-list__item--masterpass app.js:51663 o-pf-list__item--bitcoin app.js:51663 o-pf-list__item--credit app.js:51663 o-pf-list__item--debitcard app.js:51663 o-pf-list__item--eft app.js:51663 o-pf-list__item--masterpass app.js:51663 o-pf-list__item--bitcoin app.js:51663 o-pf-list__item--credit app.js:51663 o-pf-list__item--debitcard app.js:51663 o-pf-list__item--eft app.js:51663 o-pf-list__item--masterpass