Vuejs

I want to save data (objects) in a list in the DB. When sending, I get the response properly, including a key for the newly created item. The problem: Data isn't really saved nor visible!

What's the problem?

try { const response = await this.$firebaseRefs.time.push(...this.timeForm) console.log(response) } catch (err) { console.log(err) }

I am making a filter which takes its filter value from a input tag and when i hit enter it should make a new chip and input tag should be empty again

In our project we've previously been using Thymeleaf, but now that we're moving over to Vue.js, we're experiencing some issues using the same ad scripts. The scripts look like this. I've only altered the URLs.

<script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script> <script src="//sub.adcompany.net/url/to/advertisement/script.js" async="async" defer="defer"></script>

If we put these tags in the <template>, Webpack gives the following message:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

So I've then been Googling all over to find a similar case. There are some plugins that do this for Google Ads, but they won't work for us. Escaping the script tags <\/script> works in a way, but then the script isn't added to the DOM until after loaded, and so it doesn't run.

Has anyone run into similar issues? If so, what was your solution?

I just want to determine whether a checkbox is checked or not in Vue js 2. In jquery we have functions like $('input[type=checkbox]').prop('checked'); which will return true if checkbox is checked or not. What is the equivalent function in Vue js.

Here is the scenario with code. Please note i am using laravel with its blade templates.

@foreach ($roles as $role) <input type="checkbox" v-on:click="samplefunction({{$role->id}})" v-model="rolesSelected" value="{{$role->id}}"> @endforeach

The js part is

<script> var app = new Vue({ el: '#app1', data: { rolesSelected:"", }, methods : { samplefunction : function(value) { // Here i want to determine whether this checkbox is checked or not } }, }); </script>

Our web application(many d3 charts) is set up by vue, and I could export our

webpage to pdf by the combination of canvg, html2canvas(convert web content to

png) and emit png file to server and use nodejs to download it automatically

and periodically(weekly report).

However, I was asked to use different render method from client-side to

server side rendering and use wkhtmltopdf or phantomjs to download pdf.

My question is that is it difficult to render many complicated d3 chart and edit

css in server side rendering by using vue or another technique?

Thanks!

I'm trying to use VueJs conditional rendering using handlebars in vueJs 2.0 as per their documentation but eslint is coming back with and error:

- avoid using JavaScript keyword as property name: "if" in expression {{#if ok}} - avoid using JavaScript keyword as property name: "if" in expression {{/if}}

VueJs does not seem to be rendering it.

<!-- Handlebars template --> {{#if ok}} <h1>Yes</h1> {{/if}}

I'm using vuejs (webpack + vueify) and typescript , ts configuration seems to be working, but only with .ts files.

For example in tsconfig.json I have

"compilerOptions": { "strictNullChecks": false,

So strictNullChecks works fine in .ts files:

But not in .vue:

Error:

Initializer type null is not assignable to variable type string

Typescript doesn't throw compile errors, only PhpStorm seems to have problems with detecting configuration.

What do I have to do so my configuration in tsconfig.json reflects in .vue files as well?

I've created a small test component. Whenever I type into the input, VueJS tells me I am mutating the 'value' prop event though I am not. Can someone tell me what is going on here?

<template> <input type="text" :value="propValue" @input="inputHandler"> </template> <script> export default { data() { return { propValue : this.value }; }, props : [ 'value' ], methods : { inputHandler(event) { this.$emit('input', event.target.value); } } }; </script>

I do notice in the console that I get two "You are running Vue in development mode." messages. Does that mean I have VueJS being called twice? Will that cause the error above to happen?

I have a multidimensional object which looks like this:

obj: { 1: { 'a' => [ [] ], 'b' => [ [] ] }, 2: { 'x' => [ [], [] ] } }

I have it in my root. I also have a watch for this object, and I am updating another object accordingly...

new Vue({ el: '#app', data: { obj: {}, newObj: {} }, watch: { obj: { handler(obj) { } } } })

I am using newObj as a prop and pass it to a component to perform for loops.

Inside handler, if I use make a change in first level key of object, the component updates the dom the DOM.

handler(obj) { this.$set(this.newObj, key, { [innerKey]: [ [] ] }); }

However if I try changing the secondary-level keys, the component doesn't update the DOM.

handler(obj) { var key = 1; var additions = ['a', 'b', 'c'] // First try: var scafold = this.newObj[key] scafold[additions[i]] = [ [] ]; this.newObj[key] = scafold; // Second try: this.$set(this.newObj[key], additions[i], [ [] ]); }

Although, if I check vue debugger, it shows the object is updated as wanted using both ways, the DOM doesn't change.

As I said, I believe it is that it doesn't watch inner keys and respond to it. What is the proper way of overcoming this issue?

I am doing an application with laravel and vue js. To run the application in local host i tried the following but it is throwing error,

Unable to open browser. If you are running in a headless environment, please do not use the open flag

I have installed npm using npm install, then i gave the command npm run dev then the above error was displaying..

The package.json code is,

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "0.*", "lodash": "^4.17.4", "vue": "^2.1.10" } }

I am using Typescript with Vuejs to build an application. I have several stand alone components (.vue) files that I am importing into a Typescript (.ts) file. In the Typescript file, I am importing Vue from the npm Vue library and then creating a new Vue to display my components. The error that I am seeing is:

Property x does not exist on type 'Vue'

My build system is Webpack with tsc. Why am I getting this error and how can I resolve it?

main.ts import Vue from 'vue'; import Competency from '../components/competency.vue'; new Vue({ el: "#app", components: { 'competency': Competency }, data:{ count: 0 }, methods:{ initialize: function(){ this.count = count + 1; // Errors here with Property count does not exist on type vue } } }) tsconfig { "compilerOptions": { // "allowJs": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "lib": [ "es2015", "dom", "es2015.promise" ], "module": "es2015", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": false, //"outDir": "./build/", "removeComments": false, "sourceMap": true, "target": "es5" }, "exclude": [ "./node_modules", "wwwroot", "./Model" ], "include": [ "./CCSEQ", "./WebResources" ] } webpack.config.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { Evaluations: './WebResources/js/main.ts' }, devServer: { contentBase: './dist' }, module: { rules: [{ test: /\.ts$/, exclude: /node_modules|vue\/src/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.vue$/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ filename: 'Evaluations.html', template: './WebResources/html/Evaluations.html' }), new HtmlWebpackPlugin({ filename: 'ExpenseUpload.html', template: './WebResources/html/ExpenseUpload.html' }), new webpack.optimize.CommonsChunkPlugin({ name: 'WebAPI' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }

please find vuejs code below. When i access the url directly on the browser, the data(JSON) are retrieved but when retrieving the data by the http request, the data are not stored in the variable. I am using Vuejs and Laravel. Can someone tell me what is wrong with the code. Thank you.

<script> Vue.component('account-type-list', { template: `<div></div>` data:() => { return { typesofaccount:[] }; }, created: function() { this.getAccountTypes(); }, methods: { getAccountTypes: function() { this.$http.get('/list/accounttypes').then(response => { this.typesofaccount = response.body }); }, } }); Vue.component('type', { template: '<a class="active item"><slot></slot></a>' }); new Vue({ el: '#root', }); </script>

I am trying to get a single object using the .child() method however it returns with a .key and .value array of objects instead of giving me 1 object with all the keys and values. For example:

Here it is giving me an array of objects. However, if I use a query I will get an array of 1 objects that will return data like this:

How can I get a single value in the form of the second picture?

Here is the code:

let app = Firebase.initializeApp(config) let db = app.database() export default { name: 'hello', firebase: { businesses: db.ref().child('3021') // businesses: bdRef.orderByChild('title').equalTo('Feather Animation Wood Carving Supplies') // Code for the bottom picture }, components: { 'card': Card } }

I have an app in vue.js with vuex that implement some modules, what I'm doing is concatenating objects to get some actions, getters, mutations. Like this:

const files = require.context('../../renderer/', true, /\?*.actions.js|.\?*.getters.js|.\?*.mutations.js$/); const modulesSrc = {}; files.keys().forEach((key) => { modulesSrc[key.replace(/(\.*\/|\.js)/g, '')] = files(key).default; }); export default modulesSrc;

What I get is it:

When I try to change the regex to work by getting only the name of the folder, it goes like this:

const files = require.context('../../renderer/', true, /\?*.actions.js|.\?*.getters.js|.\?*.mutations.js$/); const modulesSrc = {}; files.keys().forEach((key) => { modulesSrc[key.replace(/(\.*\/|\.js|actions?|getters?|mutations)/g, '')] = files(key).default; }); export default modulesSrc;

But inside the element, it only gets the last file, and do not concat it with the others.

What can I do ?

Thanks!

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. My project structure looks like this:-

SampleProject -> BackEnd -> FrontEnd

I have used webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).

The dev server configuration my webpack.config.js looks like this:-

devServer: { proxy: { '/api': { target: 'http://localhost:3000' } }, historyApiFallback: true, noInfo: true }

I have written a Node api in services.js

exports.getAllPatientData = function(req, res) { con.connection.query("SELECT fname, lname, city, country_code, TIMESTAMPDIFF(YEAR, DOB, CURDATE()) AS age FROM sbds_patient_data where pid = 1", function(err, result, fields) { if (err) { throw err; res.json({ status: "error", message: "An error has occurred. Please try again later" }); } console.log(result); res.json({ status: "success", results: result }); });}

And in app.js i call the service like this

app.get('/profile', services.getAllPatientData);

In my Vue component file I call the api like this:-

import axios from 'axios'; export default{ data(){ return{ firstName: '', lastName: '', age: '', errors: [] } }, created: function(){ this.getPatientInfo(); }, methods:{ // Function to get the patient's personal information getPatientInfo: function(){ axios.get('http://localhost:3000/profile') .then(response =>{ this.firstName = response.data; this.lastName = response.data; this.age = response.data; }) .catch(e => { this.errors.push(e); }) } } }

Both the servers are now running. When I open localhost:8080/profile, I see the entire json object on the screen like this,

The browser console does not show any object. But my network says localhost:3000/profile. What wrong am I doing here? How can I rectify this issue and get the data?

I'm in the process of moving the build process of a vue.js app from gulp/browserify/vueify to webpack with vue-loader.

If I have modules: false in my .babelrc, I get an error on page load: Uncaught TypeError: Cannot assign to read only property 'exports' of object

If I remove modules: false, the errors I get are along the lines of Vue.use is not a function. This can be fixed by changing the way I import libraries from:

var Vue = require('vue');

to

var Vue = require('vue').default; So my question is:

Do I have to know ahead of time whether or not a library uses import/export default or require/module.exports? Or does webpack take care of that and I assume I can use import/export instead of require/module.exports across the board?

I have a component triggered with v-on:click="someMethod".

How would I get the mouse coordinates (X, Y) of this click?

Additional information: HTML5 Canvas component

Is there any way to model g_recaptcha_response in Vue Form?

<input id="email" v-model="form.email" type="email" class="form-control"> <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}"></div>

just like v-model="form.email" can we do v-model="form.g_recaptcha_response"?

new Vue({ el: '#app', data: { form: new Form({ email: '', g_recaptcha_response: '' }), } });

Form snippet is here https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js

What will be the better approach to integrate Google reCaptcha in Vue?

So i'm learning Vue.js and found this fiddle that does exactly what i want to do.

Here is the fiddle: https://jsfiddle.net/os7hp1cy/48/

So i integrated this only to get this error:

• invalid expression: v-for="user in users | filterBy searchKey | paginate"

So i've done some digging and I see it has changed from version 1 to 2. However, i dont know how to fix this.

<li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li>

I would like to replace this with something that vue2 will support and will work the same way.

Thanks!

I have two objects in my root - obj and newObj. I watch changes on my obj object with deep: true, and on changes I update newObj accordingly.

In my vue debugger, the newObj seems updated as expected, however the component doesn't perform the for loop count. Or if I try to {{ newObj }}, it logs only the first update.

I tried to re-create the issue on this Fiddle.

my html:

<div id="app"> <button @click="appendTo">Append</button> <my-comp v-bind:new-obj="newObj"></my-comp> </div>

and vue:

new Vue({ el: '#app', data: { obj: {}, newObj: {} }, methods: { appendTo() { if (typeof this.obj[1] === 'undefined') { this.$set(this.obj, 1, {}) } var randLetter = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97); this.$set(this.obj[1], randLetter, [ [] ]) } }, watch: { obj: { handler(obj) { var oldKeys = Object.keys(obj) var newKeys = Object.keys(this.newObj); var removedIndex = newKeys.filter(x => oldKeys.indexOf(x) < 0 ); for (var i = 0, len = removedIndex.length; i < len; i++) { delete this.newObj[removedIndex[i]] } oldKeys.map((key) => { if (this.newObj.hasOwnProperty(key)) { var newInnerKeys = Object.keys(this.newObj[key]); var oldInnerKeys = Object.keys(obj[key]); var additions = oldInnerKeys.filter(x => newInnerKeys.indexOf(x) < 0); for (var i = 0, len = additions.length; i < len; i++) { // here this.$set(this.newObj[key], additions[i], [ [] ]); } var deletions = newInnerKeys.filter(x => oldInnerKeys.indexOf(x) < 0); for (var i = 0, len = deletions.length; i < len; i++) { delete this.newObj[key][deletions[i]] } } else { this.newObj[key] = {} for (var innerKey in obj[key]) { this.$set(this.newObj, key, { [innerKey]: [ [] ] }); } } console.log(obj); console.log(this.newObj) }); }, deep: true } } }) Vue.component('my-comp', { props: ['newObj'], template: ` <div> <div v-for="item in newObj"> test </div> </div> ` })