Software

I am doing a login function vue project, login is in the express server to control, the generated dev-server.js can not meet the needs. How to write their own express code embedded in the existing project or how to rewrite dev-server.js. I tried to add the following code to test

app.get('*', function(req, res){ console.log('get /'); }); // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory); app.use(staticPath, express.static('./static')); var uri = 'http://localhost:' + port devMiddleware.waitUntilValid(function () { console.log('> Listening at ' + uri + '\n') });

Is the output of the "get /" But the page can not open, reported the following error

simple-line-icons.css Failed to load resource: net::ERR_EMPTY_RESPONSE style.css Failed to load resource: net::ERR_EMPTY_RESPONSE

It seems that the following code is not implemented, static path is not added. why? Is there any solution? Want to express the express code as a module independent of the existing project, how can I do?

i have problem. When I click the button, it receives an entire database, but I want laod part database. How can I do this?

For example: After every click I would like to read 10 posts. Thx for help.

Messages.vue:

<div class="chat__messages" ref="messages"> <chat-message v-for="message in messages" :key="message.id" :message="message"></chat-message> <button class="btn btn-primary form-control loadmorebutton" @click="handleButton">Load more</button> </div> export default{ data(){ return { messages: [] } }, methods: { removeMessage(id){...}, handleButton: function () { axios.get('chat/messagesmore').then((response) => { this.messages = response.data; }); } }, mounted(){ axios.get('chat/messages').then((response) => { this.messages = response.data }); Bus.$on('messages.added', (message) => { this.messages.unshift(message); //more code }).$on('messages.removed', (message) => { this.removeMessage(message.id); }); } }

Controller:

public function index() { $messages = Message::with('user')->latest()->limit(20)->get(); return response()->json($messages, 200); } public function loadmore() { $messages = Message::with('user')->latest()->get(); // $messages = Message::with('user')->latest()->paginate(10)->getCollection(); return response()->json($messages, 200); }

paginate(10) Loads only 10 posts

I am building two nested select choices where the second depends on the first. I already builded them and they ae working. The problem is everytime i change the first one the second select box default value doesn't get show.

When i enter the first time it get updated because i set a intitial value for it.

here is my lopp code:

<div class="form-group"> <label class="control-label col-sm-3">Document Type</label> <div class="col-sm-9"> <select class="form-control" v-model="firstOption"> <option v-for="(item,index) in documentType"> {{ index }} </option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-3">Document Selection</label> <div class="col-sm-9"> <select class="form-control" v-model="secondOption"> <option v-for="(item,index) in documentType[firstOption]">{{item.text}}</option> </select> </div> </div>

my data

i

mport data from '../interfaceData/documentType.json' import permissions from '../interfaceData/permissions.json' export default { name: 'app', data() { return { firstOption: "Business Development", secondOption: "Financial Proposal", documentType: data, } },

the documenttype that represent my nested lopps is loaded from a json, like the following:

{ "Business Development": [ { "text": "Financial Proposal", "key": 1 }, { "text": "Master Licence and Service Agreement", "key": 2 }, { "text": "Non-Disclosure Agreement", "key": 3 }, { "text": "Relatório de Missão", "key": 4 } ], "Configuration Management": [ { "text": "Configuration Management Plan", "key": 1 }, { "text": "Configuration Management Plan For Implementation Projects", "key": 2 } ], "Delivery": [ { "text": "Acceptance Protocol", "key": 1 }, { "text": "Acceptance Protocol For Implementation Projects", "key": 2 }, { "text": "Installation Manual", "key": 3 }, { "text": "Product Release Notes", "key": 4 }, { "text": "Product Update Release Notes", "key": 5 }, { "text": "Release Checklist", "key": 6 }, { "text": "Release Notes", "key": 7 }, { "text": "Release Strategy", "key": 8 }, { "text": "Release Manual", "key": 8 } ], "Financial": [ { "text": "Monthly Consultant Report", "key": 1 } ], "Generic": [ { "text": "General Document", "key": 1 }, { "text": "Meeting Minutes", "key": 2 }, { "text": "Memorandum", "key": 3 } ], "Human Resources": [ { "text": "Acordo de Confidencialidade CMF", "key": 1 }, { "text": "Acordo Sobre Isenção de Horário de Trabalho", "key": 2 }, { "text": "Contrato de Trabalho a Termo Certo", "key": 3 }, { "text": "Software Discharge of Responsability", "key": 4 }, { "text": "Termo de Responsabilidade de Software", "key": 5 } ], "Project Management": [ { "text": "CloseDown Meeting Minutes", "key": 1 }, { "text": "Kick Off Meeting Minutes", "key": 2 }, { "text": "Progress Meeting Minutes", "key": 3 } ], "Quality Management": [ { "text": "Incident Report", "key": 1 }, { "text": "Policy Definition", "key": 2 } ], "Specification Documents": [ { "text": "Software Architecture Specifications", "key": 1 }, { "text": "Software Detailed Design", "key": 2 }, { "text": "Software Requirements Specification", "key": 3 }, { "text": "System Requirements Specification", "key": 4 }, { "text": "Task Breakdown", "key": 5 }, { "text": "Tecnical Specification", "key": 6 }, { "text": "Tecnical Specification For Implementation Projects", "key": 7 }, { "text": "User Requirement Specifications", "key": 8 } ], "Testing": [ { "text": "Test Case Specification", "key": 1 }, { "text": "Test Plan", "key": 2 }, { "text": "Test Report", "key": 2 } ], "Training": [ { "text": "Attendance Sheet", "key": 1 } ] }

any help? thanks

In this way:How to use a jQuery plugin inside Vue But ,Error: '$' is not defined What do I need to do, to get signalr working using webpack? Thank you!

I usually need to write "layout related" styles (e.g. display: flex, margin: ..., padding:...) in the root tag of a vue component. So I need to do this by adding a class in the root of a vue component. I want to name all of these classes as wrapper given that all of them just serve a single purpose - defining the layout of this particular component. And I intended to use scoped css to avoid these classes from interferencing with each other.

The problem is I cannot really do this for components in parent-child relationship because A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. (vue-loader)

Question: How would you like to name classes in root tag of a vue compoennt that just defines the layout?

P.S. I thought about giving them the same name as component's name. But some of the component names can be quit long (more than 10 characters). And since they have the same purpose, it makes more sense to give them a uniform name.

I am facing problem with vue.js

I am using php api to login where where session is created and variables are stored

I am getting success on login api but when I call the next api to get contents which requires a session, it is throwing an error saying no valid session, even though i am calling login api and it is creating session.

/***** my data ****/ data() { return { user: { email: '', password: '', institutionCode: '', subscriberName: '', levels: '1', country: 'IN', // vendorid: 'wfnsu5LK', // vendorkey: 'OHmYPEgLTibhxZMO', }, vendorInfo: { vendorid: 'wfnsu5LK', vendorkey: 'OHmYPEgLTibhxZMO' }, levels: [], login: { email: 'praveen@gmail.com', password: 'praveen' } } }, /***** my methods ****/ methods: { signIn() { alert('inside login'); var loginData={}; loginData.email = this.login.email, loginData.password = this.login.password, this.$http.get('https://vpremieretest.mobiotics.com/subscriber/v1/login', { params: { 'vendorid':this.vendorInfo.vendorid, 'vendorkey':this.vendorInfo.vendorkey, 'email': loginData.email, 'password': loginData.password } }) .then(response => { console.log(response); var login = $.parseJSON(response.bodyText); if(login.email == loginData.email) { //alert('successful login') this.$http.get('https://vpremieretest.mobiotics.com/subscriber/v1/content/', { params: { 'vendorid':this.vendorInfo.vendorid, 'vendorkey':this.vendorInfo.vendorkey } },{withCredentials: true}, {emulateJSON: true}) .then(response => { console.log(response); }) } else { alert('invalid credentials'); } }, error => { console.log(error); }) } } }

I can't change the variable qty in my computed properties.

getQuantity(){ return (qtyId) => { var qty = 0; axios.get( window.location.origin + '/api/quantity/' + qtyId) .then(res => { console.log(res.data.qty) qty = res.data.qty }) .catch() console.log(qty) return qty } },

It is an asynchronous request using axios. the console.log(res.data.qty) works fine it output 4 but the console.log(qty) is 0. I think it's because of asynchronous request... How can I make it work... TY

When I hit enter, the page refreshes and nothing is executed in my callback. I've tried taking the input out of the form but then nothing happens.

<form class="left"> <input id="search" class="expanded-input" type="text" @keyup.enter="submitSearch" placeholder="Press enter to search by artist or title"> <i class="material-icons">search</i> </form>

JS:

submitSearch(e) { e.preventDefault(); console.log("success"); return false; }

I have been struggling to setup a unit test enviroment. I have altered the webpack-template to use typescript and follow class based approach. For unit test I am using Karma, Mocha, Chai, PhantomJs and istanbul-instrumenter-loader for code coverage.

Wrote a simple test expect(1).to.equal(2) one and results are shown, but a big error is really annoying me at the moment SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I believe the following are the relevant files where I am doing something that does not make sense, please have a glance and help me restore some sanitystrong text

/** build/webpack.test.conf.js **/ var webpackConfig = merge(baseConfig, { // use inline sourcemap for karma-sourcemap-loader module: { rules: [ { test: /\.ts$/, enforce: "pre", loader: 'istanbul-instrumenter-loader', include: path.resolve('src/'), options: { compilerOptions: { sourceMap: false, inlineSourceMap: true } } }, ...utils.styleLoaders() ] }, devtool: '#inline-source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/test.env') }) ] }) /** build/webpack.base.conf.js **/ module.exports = { entry: { app: './src/main.ts' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js','.ts', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', exclude: '/node_modules', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, { test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules', include: [resolve('src'), resolve('test')] }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(ts)$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } } } /** tsconfig.json **/ { "compilerOptions": { "module": "es2015", "moduleResolution": "node", "types": [ "node", "mocha", "sinon-chai" ], "target": "es5", "allowJs": true, "rootDirs": ["src"], "noImplicitAny": false, "experimentalDecorators": true, "rootDir": ".", "sourceMap": true, "strictNullChecks": true, "allowSyntheticDefaultImports": true, "lib": [ "es5", "dom", "es2017", "es2015.promise", "es2017.object" ], "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [ "node_modules", "src/vue-shim.d.ts" ] } /** test/unit/karma.conf.js **/ const webpackConfig = require('../../build/webpack.test.conf'); module.exports = function (config) { config.set({ browsers: ['PhantomJS'], frameworks: ['mocha', 'sinon-chai'], reporters: ['spec', 'coverage'], files: ['../../node_modules/babel-polyfill/dist/polyfill.js','./index.js'], preprocessors: { './index.js': ['webpack', 'sourcemap'] }, webpack: webpackConfig, webpackMiddleware: { noInfo: true, stats: 'errors-only' }, coverageReporter: { dir: './coverage', reporters: [ { type: 'lcov', subdir: '.' }, { type: 'text-summary' } ] } }) } /** test/unit/index.js **/ import Vue from 'vue' Vue.config.productionTip = false const testsContext = require.context('./specs', true, /\.spec$/) testsContext.keys().forEach(testsContext) const srcContext = require.context('../../src', true, /^\.\/(?!main(\.ts)?$)/) srcContext.keys().forEach(srcContext)

I am new to VueJS and am working some simple code to understand how to handle components. I am using a simple-webpack bundler in vue-cli. Right now all I have is a simple template... (App.vue)

<template> <h1>Server Status: Critical!</h1> <template>

and this simple javascript file (main.js)

import Vue from 'vue' import App from './App.vue'

new Vue({ el: '#app', render: h => h(App) })

I can see whole thing rendered at localhost:8080, but the console log is throwing a chain of errors at me. This following object...

[WDS] Disconnected! 40:45:10 log webpack-internal:///40:45:10 close webpack-internal:///40:130:3 socket/sock.onclose webpack-internal:///94:15:4 EventTarget.prototype.dispatchEvent webpack-internal:///21:51:5 SockJS.prototype._close/< webpack-internal:///64:356:5

followed by

[HMR] Waiting for update signal from WDS... 41:49:2 //and [WDS] Hot Module Replacement enabled. 40:41:10

Any idea whats going on?

Developing a SPA in the frontend (with Vue.js) which consumes endpoints from a (Laravel) API in the backend introduces some challenges that need to be tackled:

1. How to sync deployment when introducing new backend/frontend code

If the code is separated in two VCS repositories (frontend/backend) it can be challenging to sync deployment of both frontend and backend making sure that both finish at the exact same time. Otherwise this can lead to unexpected behaviour (e.g. calling endpoints that are not yet deployed or have changed). Anyone came up with a great solution for this? What is your best practice to tackle this problem? What if versioning every little change is not an option?

2. How to make sure that the frontend code of the SPA is being refreshed after deployment?

So you managed to keep your deployments in sync (see problem 1.), but how do you make sure that the SPA code of every currently active end user is being refreshed? With webpack code splitting enabled, the application might break immediately for users that are currently using your app in between a deployment.

How do you make sure that your users are being served the latest JS without having them reload the entire application on every request? What are best practices (besides forcing the user to refresh the entire page via websockets)? Are there solutions that allow currently active users to keep using the application without being forced to refresh while they might just finished something that's ready to be saved?

I am very interested in your findings, learnings and solutions!

When I checked source code of Vue.js I saw that, there are some codes between two curly brackets and there is no any defination before it (like function, ()=> or another thing). I paste it on console and it runs. But how can I use it, when I dont assing it as a variable?

What is this? Why we should use this way when we write code?

.... var formatComponentName = (null); { var hasConsole = typeof console !== 'undefined'; var classifyRE = /(?:^|[-_])(\w)/g; var classify = function (str) { return str .replace(classifyRE, function (c) { return c.toUpperCase(); }) .replace(/[-_]/g, ''); }; warn = function (msg, vm) { var trace = vm ? generateComponentTrace(vm) : ''; if (config.warnHandler) { config.warnHandler.call(null, msg, vm, trace); } else if (hasConsole && (!config.silent)) { console.error(("[Vue warn]: " + msg + trace)); } }; tip = function (msg, vm) { if (hasConsole && (!config.silent)) { console.warn("[Vue tip]: " + msg + ( vm ? generateComponentTrace(vm) : '' )); } }; } ...

The doc states update is called after the containing component has updated and that compontedUpdated is called after the containing component and its children have updated. But what are the actual use cases for choosing one over the other?

I'm following a tutorial, but I would like to hide or remove this search box. I've looked through the Internet and seems I haven't found a solution yet.

I want to get rid of these two search boxes

My Code is like this:

Vue.use(VueTables.client, { compileTemplates: true, filterByColumn: true, sortable: false, texts: { filter: "Search:" }, datepickerOptions: { showDropdowns: true }, --- });

Is there any filterByColumn option to hide these two boxes?

Full code is here :https://jsfiddle.net/e0uLphvk/

Thanks!

I am new to VueJS and am working some simple code to understand how to handle components. I am using a simple-webpack bundler in vue-cli. Right now all I have is a simple template... (App.vue)

<template> <h1>Server Status: Critical!</h1> <template>

and this simple javascript file (main.js)

import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })

I can see whole thing rendered at localhost:8080, but it is throwing a chain of errors at me. This following object...

[WDS] Disconnected! 40:45:10 log webpack-internal:///40:45:10 close webpack-internal:///40:130:3 socket/sock.onclose webpack-internal:///94:15:4 EventTarget.prototype.dispatchEvent webpack-internal:///21:51:5 SockJS.prototype._close/< webpack-internal:///64:356:5

followed by

[HMR] Waiting for update signal from WDS... 41:49:2 //and [WDS] Hot Module Replacement enabled. 40:41:10

Any idea whats going on?

For some reason I am unable to set the background color by simple using

body { background-color: red; }

Inside off my App.vue file.

I can change the background color by using page-content:

.page-content { background-color: red; }

But this is a bad hack because it also messes up my panels and other components.

Is there a sure-fire way to set background color for F7+Vue apps?

I rebuild my code from Angular to Vue. and I meet a strange problem.

for Angular version, it is running correct:

var hq_str_fx_susdcad; function getRate(){ $http.jsonp("http://hq.sinajs.cn/list=fx_susdcad"); if(hq_str_fx_susdcad != undefined){ console.log(hq_str_fx_susdcad); } $interval(getRate,3000,1); }

it will get data from http://hq.sinajs.cn/list=fx_susdcad each 3 seconds, and show the value if it is not undefined.

the results is :

var hq_str_fx_susdcad="12:42:35,1.2601,1.26018,1.2589,23.7,1.25876,1.26051,1.25814,1.2601,美元兑加拿大元即期汇率,0.1,0.0012,0.001883,Dukascopy Bank,1.37937,1.25404,-+--++-+,2017-07-21";

for Vue version.

var vm = new Vue({ el:'.container', data:{ hq_str_fx_susdcad:''; }, methods: { autoReload: function(){ console.log("get rate") this.$http.jsonp('http://hq.sinajs.cn/list=fx_susdcad', function(data) { console.log(data) } ); } }, mounted(){ this.autoReload(); } })

what ever I setup. it always shows that:

Uncaught SyntaxError: Unexpected token ?

Please kindly help to check how to make it works. BTW, I cannot change any part of server http://hq.sinajs.cn/ . Great thanks.

I try to generate auto number v-bind:class="{ 'active' : isSelected(<?php echo $no; ?>) }" v-on:click="selected = <?php echo $no; ?>" which is the list getting from database but the return just get 1 for all of list what I want is 1,2,3,4

here my code

<div class="list-group" id='listGroup'> <?php include 'dismin/pages/koneksi.php'; if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; $start_from = ($page-1) * 12; $sql = "SELECT * FROM tbl_album where status='process' ORDER BY albumid DESC LIMIT $start_from, 12"; $rs_result = mysql_query ($sql); ####### Fetch Results From Table ######## while ($row = mysql_fetch_assoc($rs_result)) { $no=1; $aid=$row['albumid']; $aname=$row['name']; ?> <a href="gallery.php?id=<?php echo $aid; ?>" class="list-group-item" v-bind:class="{ 'active' : isSelected(<?php echo $no; ?>) }" v-on:click="selected = <?php echo $no; ?>"><?php echo $aname; ?></a> <?php $no++; } ?> </div>

How do I fix this?

Im starting up with Vue.js. The first problem I've run into is that my IDE (Atom) doesn't beautify my .vue files. Its all just white text.

After some searches I came across this git ptoject but have had little success implementing it.

Any developers know of any resources for achieving a nice looking .vue file format?

I am trying to deploy a static website to an s3 bucket. I built my site using the webpack template from vue-cli

When I build the site there is a note that:

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

Indeed there are no script tags in index.html but there is a comment that:

<!-- built files will be auto injected -->

If I add a path to the JS build file build/build.js I get that error that require cannot be found.

Is there a way to serve this site via s3? If so, how? Thank you