Software

My project currently is made with VueJS. Now, we need to process a certain template with the input data, then store the result and use it to send an email (for example).

Can i render a template with the user data and save it? how?

I don't want to use another library for this purpose, unless We can't do with VueJS

I have a vue component with the following html structure:

<div v-for="ea in list1"> <competency></competency> </div> <div class="secured-break"> ** Lorem ipsum </div> <div v-for="ea in list2"> <competency></competency> </div>

When I display this html in the browser I would expect a list of items, followed by the ** Lorem ipsum text and then the second list of items. However, when I display this html, I see the ** Lorem ipsum first, then the results of list1 immediately followed by the results of list2. Why are these items displayed out of order?

css .secured-break { border-top: 1px solid #C0C0C0; font: 10px arial; font-style: italic; width: 880px; }

I'm using Element Ui for a tables

Say me please. How i can send template to label?

I'm trying to export my firebase app so I can call it inside of mocha test specs as well as within the source code I'm trying to test.

My Mocha test spec looks like this:

import Vue from 'vue' import Edit from '@/components/Edit' import filedata from '../../../static/filedata.js' import submitFile from '../../../helpers/submitFile.js' import firebaseapp from '../../../src/db.js' var db = firebaseapp.database() var storage = firebaseapp.storage() describe('Edit.vue', () => { it('should let me add files without choosing a category', () => { // add files to appear on the homepage var Constructor = Vue.extend(Edit) var vm = new Constructor().$mount() console.log(filedata + ' is the file data') var ref = storage.ref('categories') console.log(ref) submitFile(filedata) }) ...

And the submitFile file looks like this:

var firebaseapp = require('../src/db.js') console.log('the app is: ' + firebaseapp) var db = firebaseapp.database() var storage = firebaseapp.storage() module.exports = function(files){ // is the function being called from the test environment? if(files){ console.log(files) } else { // function called from src -- files were null var files = this.$refs.upload.uploadFiles; } var storageRef = storage.ref(); var pdfsRef = storageRef.child('files'); // var self = this; console.log('the files length is ' + files.length) files.forEach(function(file){ var file = file['raw']; var name = file['name'] var fileref = storageRef.child(name); var uploadTask = fileref.put(file); uploadTask.then(function(snapshot){ console.log('uploaded'); var url = snapshot.downloadURL; self.gettext(url, name); }); try { uploadTask.on('state_changed', function(snapshot){ // Observe state change events such as progress, pause, and resume // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded self.uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; console.log(self.uploadProgress + ' is the upload progress.'); switch (snapshot.state) { case app.storage.TaskState.PAUSED: // or 'paused' console.log('Upload is paused'); break; case app.storage.TaskState.RUNNING: // or 'running' console.log('Upload is running'); break; } }, function(error) { // Handle unsuccessful uploads }, function() { // Handle successful uploads on complete // For instance, get the download URL: https://firebasestorage.googleapis.com/... var downloadURL = uploadTask.snapshot.downloadURL; }); } catch(e){ console.log(e) } }) }

Lastly, here's what db.js looks like:

var Firebase = require('firebase')//import Firebase from 'firebase' var config = { ... }; var app = Firebase.initializeApp(config) /// USED TO BE CONST APP export default app

What's very strange is that when I run npm run unit, I get an error telling me that const is not recognized.

SyntaxError: Unexpected token 'const' at webpack:///src/db.js~:11:0 <- index.js:38182

So I went through my db.js file and changed const to var, and I'm getting the exact same error*, no matter how I change the file.

Does anyone have any idea what could be going on?

I have this in my vue.js template:

<img src="/media/avatars/{{joke.avatar}}" alt="">

It is inside a loop that renders jokes. Otehr fields are rendered fine, but for the image I get this error in the console:

• src="/media/avatars/{{joke.avatar}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

I have also use v-bind:src="... but get invalid expression error.

How can I fix this?

P.S.

I have also tried

<img :src="'/media/avatars/' + joke.avatar" alt="">

As suggested here, but that did not solve the problem. So I don't know how my question can be a duplicate of that.

I am trying to pass through a v-for the text and the @click action of each li. For the text I know how to do it...but for the click action?enter code here

Each item of the array menuOptions (which is in the 'data' part of my Vue component) is structured like this : {action,name}

As "action", I mean the call of a peculiar function of my code, which will be different for each item.

<ul> <li v-for="option in menuOptions" @click="option.action">{{option.name}}</li> </ul>

Do you have some ideas? (I guess that's maybe a pure JS question, but maybe there are possibilities to do it Vue too?)

I have been on this error for 3 days, not sure if this is a bug, but I installed vuejs from vuejs/vue-cli

Using the following instructions:

npm install -g vue-cli vue init webpack foo.com cd foo.com npm install npm run dev

So far it works, now I created a directory structure like this inside src/

— src — assets — filters — config — components Profiles.vue Login.vue profiles.js routes.js main.js

So, in routes.js I have something like this.

// routes.js import ProfilesView from './components/Profiles.vue' import LoginView from './components/Login.vue' const routes = [{ path: '/profiles', component: ProfilesView }, { path: '/login', component: LogoutView }] export default routes

So far, I have no issue with above code, the problem comes from these two below files either profiles.js or Profiles.vue

Here is profiles.js

const profiles = Vue.mixin({ data: function () { return { profiles: [] } }, methods: { fetchProfiles: function(){....}, mounted: function(){ this.fetchProfiles() } }) export default profiles

Here is Profiles.vue

<template lang="html"> <div> {{ profiles }}<div> </template> <script> import { profiles } from '../../profiles' export default { mixins: [profiles], data () { return { profiles: [] } }, mounted () {} } </script> <style lang="css"> </style>

With the above code, I get these errors.

profiles.js:1 Uncaught ReferenceError: Vue is not defined at Object.<anonymous> (profiles.js:1) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.defineProperty.value (app.js:55806) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.<anonymous> (Profiles.vue:7) at __webpack_require__ (bootstrap 1995fd0fa58cb1432d6f:659) at fn (bootstrap 1995fd0fa58cb1432d6f:85) at Object.__webpack_exports__.a (app.js:56033)

If I add import Vue from 'vue' to profiles.js the above error gets replaced with this one:

Uncaught TypeError: Cannot read property 'components' of undefined at checkComponents (vue.esm.js:1282) at mergeOptions (vue.esm.js:1363) at mergeOptions (vue.esm.js:1379) at Function.Vue.extend (vue.esm.js:4401) at Object.exports.createRecord (index.js:47) at Profiles.vue:26 at Object.<anonymous> (Profiles.vue:30) at __webpack_require__ (bootstrap 625917526b6fc2d04149:659) at fn (bootstrap 625917526b6fc2d04149:85) at Object.__webpack_exports__.a (app.js:56036)

This is complaining about the mixins: [profiles], in profiles.js, I am thinking profiles prop is undefined, but that is not the case. For some reason Profiles.vue is not reading or reading the correct data from profiles.js because I also get this error always:

[HMR] bundle has 1 warnings client.js:161 ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Profiles.vue 6:11-15 "export 'profiles' was not found in '../../profiles'

It is complaining export default profiles isn't found in profiles.js even though it clearly does. I even tried using require, changing the paths ... everything. Nothing works.

I would appreciate any help with this.

I have a collection of jQuery plugins in the file jquery-plugin-collection.js and I initialise the plugins in the file custom.js. When I reload the page, all the plugins are being initialised. but when I load the page using vue-router, the plugins are not initialised. I made alot of google research with no result. Am wondering if am the first to face this issue. You can comment if you want me to add some codes.

I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like

<template> <button @click="() => {some code... }">Click me</button> </template>

Arrow functions works fine inside script tag, but problem with template tag drives me mad.

I have a root Vue 2 instance mounted on every page of my application, and I need to add methods that will be accessed only on two pages of my app. I know I could add those methods in my root Vue instance but I'm not sure if it is the right way to go as those methods will be available from all other pages in the app and they have dependencies that I don't want to import on all pages.

// app.js //## Root Vue Instance window.App = new Vue({ el: '#app', methods: { ... } })

I thought about extending the global Vue prototype on a separate JS file that loads only on the page I need these methods:

// page1.js Vue.prototype.method1 = function(){...}

However on the second page I need to access those methods I will have to repeat myself.

// page2.js Vue.prototype.method1 = function(){...}

What is the recommended approach on this?

I'm working with an app newly built running on JavaScript (vue.js) , Mongodb, Express.js and node.js . My primary responsibility is to perform testing and take care of front end. Can you please suggest tools and software I can learn to facilitate the job and be more effective at it ? Thanks.

I'm a beginner with Vuejs framework and I'm having a problem in using js libraries in my vue project.. I'll be sooo grateful if anyone could help meee

btw I tried adding this in my main.js file and it didn't work

import template from './assets/js/template.js' Object.definePrototype(Vue.prototype, '$template', { value: template })

template.js is my js file

I have a django project where text is annotated. Once the text is highlighted it should bring up a create button in order to actually create the annotations. The highlighting is done using js rects. This all works fine except when you select the first character of the entire body of text, then the button doesn't show up or is removed. You could highlight the first character or an entire sentence and as long as the first character is selected then the create button is either removed or doesn't show. I'm using vue.js to manipulate the buttons. From the debugging that I have done, it is being done in the vue.js source code but I am having a hard time figuring out whats triggering the node removal. Any ideas as to what could be causing this? Any ideas are greatly appreciated

I am working on my project in laravel/vue.js and I decided to use simple vue-multiselect to choose categories from my database. Thing is I want to clear the value from input field (to look for item in list).

My multiselect component:

<multiselect v-model="value" placeholder="Find the category" label="category_name" :options="categories" @input="addReceiversFromCategory"> </multiselect>

I try to clear an v-model but it work only on first select after page load (and also it is not a smart way..). Last thing i try was the :clear-on-select="true" but it works onlu when multiple is true (which I dont want to be true). I think its simple to do but I didn't find any way in documentation doc

I am quite new to Vue.js. Recently, I have encountered an issue with attaching/detaching keyboard events to window inside one of my components. Here are my methods:

created() { this.initHotkeys(); }, beforeDestroy() { this.discardListeners(); }, methods: { initHotkeys() { window.addEventListener('keyup', this.processHotkey.bind(this)); window.addEventListener('keydown', this.removeDefaultBehavior.bind(this)); }, discardListeners() { window.removeEventListener('keyup', this.processHotkey.bind(this)); window.removeEventListener('keydown', this.removeDefaultBehavior.bind(this)); }, ....

The events attach and fire up without any issues. However, when I switch components, the events still remain attached to the window. After a bunch of attempts, I found out that if I remove the .bind(this) part from all the callbacks, events detach successfully.

Can anyone, please, explain me why this happens?

Thank you in advance!

I have a problem, I used a get and post function to retrieve and save some url in my database, but now I d like to update a variable count, that should rapresent the votes that every video get, and after that I shoul be able to disable the button that a user click to vote. So I'm having some troubles to make the update function, or I should use another post? But if so I probably create another element inside my DB or not?

so here there is my video and for now I set the video's id invisible using css, to test it and try to find the video with that specific id and make the update

<p class="invisible" id="idVideo"> {{item._id}} </p> <iframe class="partecipant" v-bind:src="item.video.url"> </iframe> <p id="voti" > {{item.voti.count}} </p> <input type="button" id="buttonVoti" v-on:click="addVoto">

so here, when the user click the button with id= buttonVoti the v-on click call addVoto function

methods: { ... //ALL THE OTHERS METHODS ... ... ... //AND THEN THE ADDVOTO FUNCTION addVoto : function () { var self = this; //self.videos[1].voti.count++ //console.log(self.videos._id); var i = document.getElementById("idVideo"); var idVid =i.innerHTML; console.log(idVid);

so here I can change the variable count, using self....count++ but I have to store and then retrieve again the same video with the new count updated.

here there is my model so the logic to access to the count should be this one

var mongoose = require('mongoose'); var Schema = mongoose.Schema; var videoSchema = new Schema({ video : { id : String, url : String, idchallenge : String }, voti : { count : {} } }); module.exports = mongoose.model('Video', videoSchema);

I've got node/npm/vue.js-cli installed with default website.

I have these two extensions installed:

When I save, it checks ESlint rules and shows me errors:

The problem is, when I press CTRL-SHIFT-F to format the code, it applies other rules, e.g. format code takes the space out from between the function name and the parentheses, but then ESLint complains that it is not there.

1. How do I know what tool/extension is formatting my code?
2. How do I know what tool/extension is checking rules when I save?
3. How can I set these so that they are the same so that reformatting my code changes the code to rules that it checks when it saves?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

But when I installed vuejs-cli, I explicitly stated I didn't want eslint when it offered to install it.

And there are no eslint errors in my settings:

And in my browser I see this:

Otherwise, I haven't changed the files, and it worked right after I had installed it once.

How can I get these eslint errors to not occur and the site to display corrected?

I installed node.js on a Windows machine.

Then I installed npm i -g vue-cli.

npm run dev brought up the vue.js-cli site at http://localhost:8080.

After turning off and on my computer, when I type npm run dev, I get this error:

What do I need to do to get node able to server the vue.js-cli site again?

This is code from bulma.io and I try using it in template of the component file(.vue)

<div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" placeholder="Text input"> </div> </div>

But content label tag (word "Name") doesn't appear in browser. If I delete class='label' then it does. Why it happens?