Software

Upload file with vue and receive it nodejs

Vuejs - Thu, 2017-09-14 17:50

I am trying to upload a file to the server with vuejs, actually i don't want the form to treat the file and upload it, i prevent the submit and treat some logic by myself, so at the begin i want to do something simple just check if it is a pdf and if everything is ok it should point to /upload in the localhost defined for NodeJS server

<template> <div id="app"> <form> <h2>Select a file</h2> <input id="inputVal" type="file" @change="onFileChange"> <button @click.prevent="sendFile()">Send</button> </form> </div> </template>  <script> export default { name: 'app', data() { return { file: '' } }, methods: { onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) { return; } var ext = files[0].name.split('.').pop(); if(ext === 'pdf') { this.createFile(files[0]); } else { this.file = ''; this.clearFileInput(document.getElementById('inputVal')); } }, createFile(file) { this.file = file; }, clearFileInput(ctrl) { try { ctrl.value = null; } catch(ex) { } if (ctrl.value) { ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl); } }, sendFile() { var vm = this; if(this.file !== '') { this.$http.post('http://localhost:3000/upload',{params: vm.file, headers: {'Content-Type': 'multipart/form-data'}}) .then(response => { // JSON responses are automatically parsed. // }, error => { //this.errors.push(e) }); } } } } </script>

on my server side i am receiving undefined, i don't really know why, i just wanna see if i really got any file in the server, and if yes i want to save it on the server side, any help with that?

i just did this on the /upload endpoint:

router.post('/upload',function(req,res) { console.log(res.body); })

Categories: Software

quasar framework - colour and font size of stacked label

Vuejs - Thu, 2017-09-14 17:03

I am using the latest quasar framework. I want to change the colour and font size of the stacked label in a q-input field. Changing the in the css doesn’t seem to take effect. Any local styling apply only to the input text and not to the label. how to solve this problem? Thanks, Priy

Categories: Software

Vue.ks transition on replacing list

Vuejs - Thu, 2017-09-14 16:23

I faced up with problem which described in vue.js official documentation here, but with kidna different data. I want to create tree-like structure with items and sub-items to describe tree (files and folders structure is good example). To make some visual enhancement I wanted to make them sliding, but got that. mode="out-in" was already set and made no effect.

Any idea how to fix this transition?

Vue.component('booster', { props: { item: { type: Object } }, template: '<div class="booster" @click="$emit(\'click\')"><img :src="item.image"></div>' }); Vue.component('boosters', { data: function() { return { boosters: this.items, path: [], root: this.items }; }, props: { items: { type: Array }, item_up: { type: Object, default: function() { return { name: "Up", image: "http://via.placeholder.com/128x178/000000/ffffff?text=↑" }; } } }, methods: { navigate: function(item) { var self = this; if (item === self.item_up && self.path.length) { self.root = self.path.pop(); } else if ("undefined" !== typeof item.items) { self.path.push(self.root); self.root = [self.item_up].concat(item.items); } else { console.log(item.name); } } }, template: '<transition-group name="slide" mode="out-in" tag="div" class="boosters"><template v-for="item in root"><booster :item="item" :key="item.name" @click="navigate(item)"></booster></template></transition-group>' }); var vue = new Vue({ el: '#content' }); #content { margin: 4rem; } .boosters { display: flex; flex-wrap: wrap; align-content: center; } .booster { box-shadow: 0px 0px 6px 3px black; box-sizing: border-box; margin: 15px; } .booster img { width: 128px; height: 178px; display: block; } .slide-enter-active, .slide-leave-active { transition: all 0.6s ease-in-out;*/ } .slide-move { transition: transform 0.5s; } .slide-enter { transform: translateY(-100%); } .slide-leave-to { transform: translateY(100%); } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="content"> <boosters :items='[ {name:"First",image:"http://via.placeholder.com/128x178?text=1",items:[ {name:"Sub-first-1",image:"http://via.placeholder.com/128x178?text=1.1"}, {name:"Sub-first-2",image:"http://via.placeholder.com/128x178?text=1.2"} ]}, {name:"Second",image:"http://via.placeholder.com/128x178?text=2", items:[ {name:"Sub-second-1",image:"http://via.placeholder.com/128x178?text=2.1"}, {name:"Sub-second-2",image:"http://via.placeholder.com/128x178?text=2.2"} ]}, {name:"Third",image:"http://via.placeholder.com/128x178?text=3"} ]'> </booster> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> </div> </body> </html>

Categories: Software

How to pass data from Vue js method scope to external JS file?

Vuejs - Thu, 2017-09-14 16:20

This my component code of vue js

<template> <div class="grapha"> <div id="chart2"></div> </div> </template> <script> // var apiURL = 'https://jsonplaceholder.typicode.com/users'; var apiURL = 'http://localhost:3000/db'; export default { name: 'grapha', data () { return { users:[] } }, methods: { fetchData: function () { var self = this; $.get( apiURL, function( data ) { self.users = data; }); } }, created: function (){ this.fetchData(); } } </script>

Here is my d3 combo chart code , here is a variable named Data takes values and shows it on graph.

Now, I want to get data from self.users (vue js component) to pass it on data variable ( external function ). Could you suggest me what would be the possible way to do that ?

Categories: Software

How to make observable with Null value in Rxjs

Vuejs - Thu, 2017-09-14 15:55

How are you I am newbie of Rxjs. I implemented Rxjs with Vue.js

export default { name: 'useraside', computed: { ...mapState({ userdata: state => state.app.selectedUser }) }, subscriptions () { return { // this is the example in RxJS's readme. raps: this.$watchAsObservable(this.userdata) .pluck('newValue') .distinctUntilChanged() .switchMap(data => () => { if (data) { fetchRaps(data._id) } }) .map(formatResult) } } }

Here, User data is from store of vuex. And it is null at first time. So I got error such as

Error in created hook: "TypeError: Cannot read property 'toString' of null"

so How can I mange this?

Categories: Software

Vue - Reactive media .readyState

Vuejs - Thu, 2017-09-14 15:45

Using Vue.js, I would like to use the readyState property of an audio dom element as a reactive property.

I have the audio element in a component and accessing it with this.$refs.audioPlayer

I have tried setting a computed property to return the property:

audioLoaded(){ if(this.$refs.audioPlayer){ return this.$refs.audioPlayer.readyState; } return false; }

This just returns the initial state (0), when the media is loaded, this should change to 4.

Is there any way to make this a reactive property?

Categories: Software

Can a vue component know if a listener is listening?

Vuejs - Thu, 2017-09-14 15:22

Say I have a modal dialogue as a Vue component. Sometimes I want OK and Cancel. Sometimes, I just want OK. The cleanest way I can think to do this would be for my component to only display Cancel when it's caller is listening for cancel events. Can this be done?

jsfiddle

markup

code

Vue.component('confirm-modal',{ template : ` <div class="confirm-modal"> Are you sure<br> <button v-on:click="$emit('ok',{})">OK</button> <button v-if="'HOW DO I TEST IF CANCEL WILL BE CAPTURED???'" v-on:click="$emit('cancel',{})">Cancel</button </div> `, }) vm = new Vue({ el : '#vue-root', methods : { handleOk : function(){ alert('OK already'); }, handleCancel : function(){ } } })

Categories: Software

Public Event: The Fate of Net Neutrality in the U.S.

Mozilla Blog - Thu, 2017-09-14 15:19

Mozilla is hosting a free panel at the Internet Archive in San Francisco on Monday, September 18. Hear top experts discuss why net neutrality matters and what we can do to protect it

Net neutrality is under siege.

Despite protests from millions of Americans, FCC Chairman Ajit Pai is moving forward with plans to dismantle hard-won open internet protections.

“Abandoning these core protections will hurt consumers and small businesses alike,” Mozilla’s Heather West penned in an open letter to Pai earlier this week, during Pai’s visit to San Francisco.

The FCC may vote to gut net neutrality as early as October. What does this mean for the future of the internet?

Join Mozilla and the nation’s leading net neutrality experts at a free, public event on September 18 to discuss just this. We will gather at the Internet Archive to discuss why net neutrality matters to a healthy internet — and what can be done to protect it.

RSVP: The Battle to Save Net Neutrality

Net neutrality is under siege. Mozilla is hosting a public panel in San Francisco to explore what’s ahead

<WHAT>

The Battle to Save Net Neutrality, a reception and discussion in downtown San Francisco. Register for free tickets

<WHO>

Mozilla Tech Policy Fellow and former FCC Counselor Gigi Sohn will moderate a conversation with the nation’s leading experts on net neutrality, including Mozilla’s Chief Legal and Business Officer, Denelle Dixon, and:

Tom Wheeler, Former FCC Chairman who served under President Obama and was architect of the 2015 net neutrality rules

Representative Ro Khanna, (D-California), who represents California’s 17th congressional district in the heart of Silicon Valley

Amy Aniobi, Supervising Producer of HBO’s “Insecure”

Luisa Leschin, Co-Executive Producer/Head Writer of Amazon’s “Just Add Magic”

Malkia Cyril, Executive Director of the Center for Media Justice

and Dane Jasper, CEO and Co-Founder of Sonic.

<WHEN>

Monday, September 18, 2017 from 6 p.m. to 9 p.m. PT

<WHERE>

The Internet Archive, 300 Funston Avenue San Francisco, CA 94118

RSVP: The Battle to Save Net Neutrality

The post Public Event: The Fate of Net Neutrality in the U.S. appeared first on The Mozilla Blog.

Categories: Software

VueJs Tree recursive elements emits to parent

Vuejs - Thu, 2017-09-14 15:16

How do you emit event inside recursive child components vuejs

Taking the tree example from vue site https://vuejs.org/v2/examples/tree-view.html

How would you transmit on click to the parent each clicked elements id?

Categories: Software

can't import vue component from npm package

Vuejs - Thu, 2017-09-14 15:03

Good day,

I have recently created an npm package for a navigation-bar which I want to import into my main codebase. I am using vue @components and I can't quite find out how to use the imported component. If anyone knows how to get the npm packaged component into the dom, your help would be greatly appreciated.

Below is a simplified example of what I have tried:

npm package import Vue from 'vue'; import Component from 'vue-class-component'; import '../navigation-bar.styles.less'; @Component({template: require('../navigation-bar.html')}}) export class NavigationBar extends Vue { constructor() { super(); } } Vue.component('navigation-bar', NavigationBar); main.ts import { NavigationBar } from '@international-client/navigation-bar'; Vue.component('navigation-bar', NavigationBar); index.html <html> <head> <title>Game</title> </head> <navigation-bar></navigation-bar> <body class="game-view"> </body> </html>

Categories: Software

Vuejs v-for multidimensional array json_object

Vuejs - Thu, 2017-09-14 14:35

I try to loop through a multidimensional json_object using the vueJS v-for function.

But i get the following error:

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

My code looks like this:

<tr v-for="timeblock in responseAPI"> <td> {{timeblock.time}} </td> <td v-for="value in timeblock.appointment"> {{value.id}} </td> <td> {{timeblock.break}} </td> <td> {{timeblock.scheduled}} </td> <td> {{timeblock.text}} </td> </tr>

And my json_object like this:

[ { "time": "09:00", "break": null, "scheduled": "Stoel 1", "appointment": { "id": 1, "patient_id": 1, "chair_id": 1, "date": "2017-05-10", "time": "09:00:00", "duration": 30, "treatment_type": "Controle", "created_at": null, "updated_at": null }, "text": null }, { "time": "09:30", "break": null, "scheduled": "Stoel 1", "appointment": { "id": 2, "patient_id": 2, "chair_id": 1, "date": "2017-05-10", "time": "09:30:00", "duration": 30, "treatment_type": "Controle ", "created_at": null, "updated_at": null }, "text": null } ]

Categories: Software

Vue.js can't access this (or method return) from component method

Vuejs - Thu, 2017-09-14 14:03

I have a component which passes data to a method, but I need to further change the data, so I am trying (without sucess) to pass it off to a function, but it is not working, whether I place the function inside the method or outside. The problem seems to be that this is unreachable in either case, resulting in undefined warnings.

What is strange is that my second method (photoConvert) IS being called (as my console.log output proves), but the data never gets returned to the calling method (onChange). I have tried setting a value in data, tried simply returning the value, nothing works, it always shows as undefined

Here are my methods:

methods: { photoConvert (file) { var f = file var fr = new FileReader() fr.readAsDataURL(f) fr.onload = function () { var tempImage = new Image() tempImage.src = fr.result var height = tempImage.height var width = tempImage.width if (height > 150) { width = width / (height / 150) height = 150 } if (width > 150) { height = height / (width / 150) width = 150 } var c = document.createElement('canvas') c.width = width c.height = height var ctx = c.getContext('2d') ctx.drawImage(tempImage, 0, 0, width, height) var b64str = c.toDataURL('image/jpeg') console.log(b64str) //this outputs correctly, so we know it was called this.b64str = b64str //tried setting data element to no effect return b64str //never gets to method calling this function } }, onChange () { if (this.$refs.pictureInput.file) { console.log('Picture loaded.') // we got it var final64 = this.photoConvert(this.$refs.pictureInput.file) console.log(final64) // fails, says undefined } else { console.log('FileReader API not supported') } } },

Categories: Software

Vue.js - How to get last child ref in v-for children components

Vuejs - Thu, 2017-09-14 13:48

I want to play latest audio after page is loaded:

how can I do something like this:

vm.$refs.player.last().play();

Categories: Software

Vuejs append data-attribute conditionally

Vuejs - Thu, 2017-09-14 13:17

I try to add conditionally a data attribute value to my vue list on loop and I try the following

but in this case the list do not renders anymore, if dump out outside html tag {{model.parent_id !== null ? model.parent_id : 0}} than I see the correct output

Categories: Software

Dependency Tracking function in JS

Vuejs - Thu, 2017-09-14 12:38

At Vue.js Advanced Features from the Ground Up Evan gave a little task.

Create a Dep class with two methods: depend and notify.
Create an autorun function that takes an updater function.
Inside the updater function, you can explicitly depend on an instance of Dep by calling dep.depend()
Later, you can trigger the updater function to run again by calling dep.notify().

The full usage should look like this:

const dep = new Dep() autorun(() => { dep.depend() console.log('updated') }) // should log: "updated" dep.notify() // should log: "updated"

The idea of that task was to show logic of dependency in Vue.

Solution

I can't get why do we use activeUpdate and wrappedUpdate in the code. Evan explained that

We're registering wrappedUpdate as activeUpdate, so that when our dependency changes and update function is called again we're in fact calling wrappedUpdate again. We need to make asure that our little dependecy trick is still working on future iterations, and it keeps collecting all dependencies. This is important, cause in some cases our update function may contain conditionals (if true - this dependency, if false - the other). Our dependency collecting system should dynamically rebalance and always keep dependencies up to date

I'm so dumb. Can anyone explain how does it work?

Categories: Software

Rendering particular component in v-for

Vuejs - Thu, 2017-09-14 12:25

I want to render particular component in v-for based on the category present in the array.

Categories: Software

Detect changes to localstorage with Vue and Apollo

Vuejs - Thu, 2017-09-14 12:08

I have a Vue app that uses Apollo to make GraphQL queries and mutations. The Apollo client is set up like so:

import ApolloClient, { createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: '/graphql' }); networkInterface.use([{ applyMiddleware(req, next) { if (!req.options.headers) { req.options.headers = {}; // Create the header object if needed. } req.options.headers['authorization'] = localStorage.getItem('token') ? localStorage.getItem('token') : null; next(); } }]); const client = new ApolloClient({ networkInterface, });

When i log into my API and get the access token I have to refresh the page for the Apollo client to recognize that a token now exists in localStorage. Why doesn't apollo detect the token in localStorage?

Categories: Software

Tried to connect to elasticsearch with axios

Vuejs - Thu, 2017-09-14 11:49

I am new to axios, I'm trying to connect my elasticsearch cloud with axios, I got : error 401 unauthorized.

Here's my code in my vue.js:

axios.get('https://username:password@url:9243/elastictest/apps/_search?pretty',{ params:{ source: JSON.stringify(query), source_content_type: 'application/json' , }, }).then(response =>this.skills =response.data.hits.hits);

I am not sure where I have to put my username and password ?

If you have any ideas or solutions ?

Thanks for your help !

Categories: Software

Vuejs cant refer array

Vuejs - Thu, 2017-09-14 11:44

I can not reference an array in vue js.

console.log(this.ref_number_response[0]);

this show me undefined, and I'm wondering why...

data(){ return{ ref_number_response: [], } }, methods:{ check_ref_number: function () { // axios request axios.get('/is_referenceNumber_free/'+this.ref_number) .then(response => this.ref_number_response.push({ info: response.data })); console.log(this.ref_number_response[0]); Event.$emit('reference_added', this.ref_number_response); }, } <div class="form-group"> <label for="" class="col-sm-2 control-label">Ref Number</label> <div class="col-sm-10"> <input v-model="ref_number" type="text" name="ref_number" class="form-control" id="" placeholder="Referent number" @blur="check_ref_number" required> </div> </div>

This is the response that i get and I do not want to iterrate several times using v-for to get actual diagnosis.

[ { "info": [ { "diagnosis": "St. post. trauma testis sin. Obs Ruptura testis sin." }, { "diagnosis": "diagnosi2" } ] } ]

Categories: Software

Why need default after require() method in Vue?

Vuejs - Thu, 2017-09-14 11:42

There is 2 projects generated by vue-cli.

one of it I could add component like this code below:

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));

But another one I can't do this , I must code like this:

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default); if not, I will get this error message:

Failed to mount component: template or render function not defined

Is someone could tell me Why like this ？

Thank you for help .

Categories: Software

Pages