Software

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

I'm building a webapp that needs to display some images, the frontend is build with VueJS and the backend is build with AdonisJS.

I'm currently having a problem that I'm uploading images from my frontend to my backend. AdonisJS generates a storage path that is local. As example, I upload from my frontend in this form:

Input form

That uses this code on the VueJS side:

let formData = new FormData(); let imagefile = document.querySelector('#file'); formData.append("image", imagefile.files[0]); axios.post('/users/' + this.user.id + "/image", formData, { headers: { 'Content-Type': 'image/*' } })

And on the AdonisJS side:

* updateProfilePicture(request, response) { const image = request.file('image', { maxSize: '20mb', allowedExtensions: ['jpg', 'png', 'jpeg'] }) const userId = request.param('id'); const user = yield User.findOrFail(userId) const fileName = `${new Date().getTime()}.${image.extension()}` yield image.move(Helpers.storagePath(), fileName) if (!image.moved()) { response.badRequest(image.errors()) return } user.profilepicture = image.uploadPath() yield user.save(); response.ok(user); }

Which is working at the moment, but that generates a path that is used by AdonisJS:

ProjectFolder/backend/storage/1500586654324.jpg

VueJS is located in:

ProjectFolder/frontend/*

How can I use my uploaded images in the frontend? Is there some way that these frameworks can be coupled?

What is the best way to set api url's based on current domain location within the Vue Instance? In angular I would be using something similar to Angular Environment However I have not come accross anything similar with Vue or Axios.

In this case my setup is dependent on multiple environments ( local, dev, stage, prod ). All based on domain relationship.

localhost = '/api-call'

dev.domain.com = 'devapi.domain.com'

prod.domain.com = 'prodapi.domain.com'

Any help at all would be incredible!

I have this vue:

<script> var starting_point = '{{ form.content.data }}'; vm = new Vue({ el: '#editor', data: { input: starting_point }, computed: { compiledMarkdown: function () { console.log(marked(this.input,{sanitize:true})); return marked(this.input, { sanitize: true }); } }, methods: { update: _.debounce(function (e) { this.input = e.target.value }, 300) } });

This is from the basic example in vue: https://vuejs.org/v2/examples/

It works fine for short sentences. However, once my blog posts - given with {{ form.content.data }} start getting longer and having custom stuff like emojis and line breaks, the javascript variable starts breaking. For instance I see stuff like this:

var starting_point = '# fourthwhat is this? ;o how bout dat. ';

and it says: 2:40 Uncaught SyntaxError: Invalid or unexpected token at the end of the ? I think because theres a line break or something.

So I think I need to stringify this whole thing or somehow make it safe to use as the javascript variable. Is there a good way to do this so that vue can understand it?

How can I filter data to populate one select based on the choice of another select? Something like, I choose an state from one select and a second select is loaded with all cities from that specific state. I'm using vue.js and vuetify as framework (with v-select component). I've tried to set a computed property, but even when I choose from first select, the second one doesn't load data.

HTML

Vue.use(Vuetify); var app = new Vue({ el: '#app', data() { return { items: { home_id: null, }, support: { home_province: '', }, options: { opt_province: [{ text: 'British Columbia', value: 1 }, { text: 'Ontario', value: 2 }], opt_city: [{ text: 'Vancouver', value: 1, dependency: 1 }, { text: 'Surrey', value: 1, dependency: 1 }, { text: 'London', value: 1, dependency: 2 }, { text: 'Toronto', value: 1, dependency: 2 }] } } }, computed: { filteredData() { var city = this.options.opt_city; var province = this.support.home_province; for (var i = 0; i < city.length; i++) { if (city[i].dependency != province.value) { city.splice(i); } } return city; }, } }) <script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <div id="app"> <v-app> <v-card class="grey lighten-4 elevation-0"> <v-card-text> <v-container fluid> <v-layout row wrap> <v-flex xs4> <v-flex> <v-subheader>Origin Province</v-subheader> </v-flex> <v-flex> <v-select :items="options.opt_province" v-model="support.home_province" label="Select" class="input-group--focused" single-line> </v-select> </v-flex> </v-flex> <v-flex xs4> <v-flex> <v-subheader>Origin City</v-subheader> </v-flex> <v-flex> <v-select :items="filteredData" v-model="items.home_id" label="Select" class="input-group--focused" single-line autocomplete> </v-select> </v-flex> </v-flex> </v-layout> </v-container> </v-card-text> </v-card> </v-app> </div>

Here it is jsfiddle link: https://jsfiddle.net/vcmiranda/tkkhwq6m/

Thanks.

So I am getting a 404 error when my app is trying to connect to my api

I have created an api which works fine, as all data is shown when I access 'http://localhost:3000/api/users'

However, when I access the data through my Vue app, I get a 404:

GET http://localhost:8080/api/users 404 (Not Found)

Code below:

Server.js

var express = require('express'); var bodyParser = require('body-parser'); var mongoose = require('mongoose'); var users = require('./routes/users.js'); //routes are defined here var app = express(); //Create the Express app var port = process.env.PORT || 3000; var mongoUri = 'mongodb://foo'; mongoose.connect(mongoUri); //configure body-parser app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/api', users); //This is our route middleware app.listen(port, function () { console.log('listening to port ' + port) }); module.exports = app;

Home.vue

<script> import axios from 'axios'; export default { data() { return { quote: '' } }, created() { axios.get('/api/users') .then((res) => { console.log(res.data); this.quote = res.data; }) .catch(error => { console.log("error", error); }); }, } </script>

Users.js

var Users = require('../models/users.js'); var express = require('express'); var router = express.Router(); router.route('/users') // Get all users .get(function(req, res) { Users.find(function(err, users) { if (err) { return res.send(err); } res.json(users); }); });

webpack.config.js

output: { path: __dirname + '/build/', publicPath: 'build/', filename: 'build.js' },

What am I doing wrong. Can I assume its something to do with my server.js?

So I am creating a Vuejs application and I am trying to fetch firebase data on component mount. That is working, but I try to write the value into a vuejs data property. For this I would only call this.property = snapshot.val(); inside the firebase function (see code below) but that is not working: this is undefined

So my code just is:

export default { data() { return { imageList: "No images!" } }, mounted() { if (!firebase.apps.length) { // Initialize Firebase var config = { ... }; firebase.initializeApp(config); var database = firebase.database(); var ref = database.ref("images").orderByChild("date"); firebase.database().ref("images/").once('value').then(function(snapshot) { this.imageList= snapshot.val(); }); } } }

I tried calling this.imageList= snapshot.val(); outside of the function with a variable to store the value, and 'this' wasn't undefined anymore, but the data wasn't there because the request hasn't finished yet.

So basically I want to get the snapshot.val(); into this.imageList!

Thanks in advance.

No matter what I've tried, isset doesn't work when I make a post call with Vue Resource. It only works when I turn off preventDefault and go directly to the PHP page.

JS:

this.$http.post('http://localhost/musicdatabase/addalbum.php', new FormData($('#submitalbum'))) .then(data => console.log(data.body));

PHP:

if(isset($_REQUEST['submit'])){ echo json_encode($_REQUEST); }

HTML:

<form class="col s12" id="submitalbum" method="post" action="addalbum.php"> <div class="row"> <div class="input-field col s6"> <input name="artist" placeholder="Artist" type="text"> </div> <div class="input-field col s6"> <input name="title" placeholder="Title" type="text"> </div> </div> <div class="row"> <div class="input-field col s12"> <input name="genre" placeholder="Genre"> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="released" type="number" name="released" placeholder="Year Released"> </div> <button @click.prevent="addNewAlbum" type="submit" name="submit" class="waves-effect waves-light btn">Submit</button> </div> </form>

<template> <div> <img v-directive:dynamic_literal /> </div> </template>

E.g. dynamic_literal = 'ok' such that in custom directive:

Vue.directive('directive', { bind(el, binding) { binding.arg // should return 'ok'

How can I use dynamic_literal as a variable or a constant whose value should be assigned under data or prop.

I tried with v-directive:{{dynamic_literal}} and :v-directive="dynamic_literal" but no use.

Thanks in advance!

I have a vue component below that I want to watch to trigger on when it's getting mounted. How do I do that?

Vue.component('check-mark', { name: 'check-mark', template: ` <input :value="value"> `, props: { value: { type: String, required: true, }, }, mounted: async function () { //trigger this.value watch() here }, watch: { value: function (value) { if (value == 'Y') { this.class = 'checked'; } else { this.class = 'unchecked'; } }, }, });