link685 link686 link687 link688 link689 link690 link691 link692 link693 link694 link695 link696 link697 link698 link699 link700 link701 link702 link703 link704 link705 link706 link707 link708 link709 link710 link711 link712 link713 link714 link715 link716 link717 link718 link719 link720 link721 link722 link723 link724 link725 link726 link727 link728 link729 link730 link731 link732 link733 link734 link735 link736 link737 link738 link739 link740 link741 link742 link743 link744 link745 link746 link747 link748 link749 link750 link751 link752 link753 link754 link755 link756 link757 link758 link759 link760 link761 link762 link763 link764 link765 link766 link767 link768 link769 link770 link771 link772 link773 link774 link775 link776 link777 link778 link779 link780 link781 link782 link783 link784 link785 link786 link787 link788 link789 link790 link791 link792 link793 link794 link795 link796 link797 link798 link799 link800 link801 link802 link803 link804 link805 link806 link807 link808 link809 link810 link811 link812 link813 link814 link815 link816 link817 link818 link819 link820 link821

[Vue.js] Add Edges Dynamically to VisJS graph Subscribe to RSS

I would like to dynamically create/update a VisJS graph.
I was able to add the nodes, but if I try to add the edges the grapth diappears.

I already tried the solutions listed in this stackoverflow question, none of them worked: Add Edge Dynamically visjs

Code: https://jsfiddle.net/Janiaje/tb1smgo2/5/

Code fails at this (52) line:

this.edges.add(this.edgesArray)

Solution :

Large third-party objects or libraries should be initialized without vue.js reactivity because it can be a cause of unexpected behavior or performance issues. And this is the case, if you just comment network in vue.js data function(to make network field be non-reactive) the app will work.

I also recommend to do that for the vis DataSets.

[Vue.js] How to import and use image in a Vue single file component? Subscribe to RSS

I think this should be simple, but when facing some trouble on how to import and use an image in vue.js single file component. Can someone help me how to do this? Here is my code snippet:

<template lang=”html”>
<img src=”zapierLogo” />
</template>

<script>
import zapierLogo from ‘images/zapier_logo.svg’

export default {
}
</script>

<style lang=”css”>
</style>

there is tried using :src, src=”{ zapierLogo }”, etc but nothings seems to work. was not able to find any example too. Any help?

Solution :

As simple as :

<template>
<div id=”app”>
<img src=”./assets/logo.png”>
</div>
</template>

<script>
export default {
}
</script>

<style lang=”scss”>
</style>

Taken from the project generated by vue.js cli.

If you want to use the image as a module, do not forget to bind data to the vuejs component

<template>
<div id=”app”>
<img :src=”image” />
</div>
</template>

<script>
import image from “./assets/logo.png”

export default {
data: function () {
return {
image: image
}
}
}
</script>

<style lang=”scss”>
</style>

And a shorter version :

<template>
<div id=”app”>
<img :src=”require(‘./assets/logo.png’)” />
</div>
</template>

<script>
export default {
}
</script>

<style lang=”scss”>
</style>

Solution 2:

If you wish to load them by webpack you can simply use :src=’require(‘path/to/file’)’ Make sure you use : otherwise it won’t execute the require statement as Javascript.

Solution 3:

I came across this issue recently, and i’m using Typescript.
If you’re using Typescript like I am, then you need to import assets like so:

<img src=”@/assets/images/logo.png” alt=””>

[Vue.js] Form input problem when showing one input per time (Vue) Subscribe to RSS

So to create a form in a web application (using Vue.js) where I show one form field at a time. As soon as the input is filled in correctly and the ‘Next’ button is pressed, it needs to show the next input in the form.

My form:

<form class=”account-form”>
<div class=”input-field” v-if=”formCount === 1”>
<label for=”email”>E-mail</label>
<input id=”email” required v-bind:class=”{wrong : wrongInput}” type=”email” name=”email” @blur=”triggerCheck”/>
</div>
<div class=”input-field” v-if=”formCount === 2”>
<label for=”name”>Name</label>
<input id=”name” required v-bind:class=”{wrong : wrongInput}” type=”text” name=”name” @blur=”triggerCheck”/>
</div>
<div class=”input-field” v-if=”formCount === 3”>
<label for=”address”>Adress</label>
<input id=”address” required v-bind:class=”{wrong : wrongInput}” type=”text” name=”address” @blur=”triggerCheck”/>
<label for=”number”>Nr</label>
<input id=”number” required v-bind:class=”{wrong : wrongInput}” type=”text” name=”number” @blur=”triggerCheck”/>
</div>
<div class=”input-field” v-if=”formCount === 4”>
<label for=”zipcode”>Zip code</label>
<input id=”zipcode” required v-bind:class=”{wrong : wrongInput}” type=”text” name=”zipcode” @blur=”triggerCheck”/>
</div>
<div class=”input-field” v-if=”formCount === 5”>
<label for=”place”>Place</label>
<input id=”place” required v-bind:class=”{wrong : wrongInput}” type=”text” name=”place” @blur=”triggerCheck”/>
</div>
<div class=”input-field” v-if=”formCount === 6”>
<label for=”phone”>Phone number</label>
<input id=”phone” required v-bind:class=”{wrong : wrongInput}” type=”number” name=”phone” @blur=”triggerCheck”/>
</div>
</form>

Every time the ‘Next’ button is pressed, formCount is incremented by one.

The problem is that when I enter a value in the first input and press next, the label for the next input shows but the value entered in the first input also appears in the next input. So I enter an e-mail address, I press ‘Next’, and the next input is Name where the input should be empty, but it shows the e-mail address I filled in in the previous input, so somehow the input inherits the previous value.

Putting value=”” inside the input element won’t make any difference unfortunately.

The triggerCheck() function (which fires on focus loss):

triggerCheck: function () {
if (document.querySelector(‘form’).checkValidity() === false) {
this.wrongInput = true
return false
} else {
this.wrongInput = false
return true
}
}

I can’t find the source of the problem.

Solution :

Okay, I’ve found the why and how about this problem.

Vue.js reuses elements to be as efficient as possible. There can be worked around this by either using unique key values or in my case, using v-show instead of v-if.

See Vue.js conditional rendering

[Vue.js] Can I use Nuxt.js to render data from database? Subscribe to RSS

when in the process of learning nuxt.js, so I’ve decided to create a small project with it. I read couple of documentation. There’s something that I did not fully understand though.

If Nuxt can use several backend framework (express, hapi, koa, others), can I use something like sequelize and create a fullstack app with it?

For example, I use express and sequelize to access a database. Then using nuxt’s asyncData to rendered it to my component without fetching using axios. Is it possible? Need some information about this

Solution :

Nuxt.js is backend agnosticmeaning you can use any backend technology to power the Nuxt.js (or Vue.js) application. In the case you can create the backend using express and sequelize. You cant directly access the database from the nuxt, you need to create interfaces that will provide data in the asyncdata.

<script>
import Customers from ‘~/plugins/Customers.js’
export default{
asyncData ({ params }) {
return Customers.getCustomers()
.then(result => { customers: result.users})
}
}
</script>

In the following example, getCustomers() returns a Promise which contains the users.
In the Customers.js you create an interfaces which will access the database. Hope this gives you an idea how you can implement, it is always recommended you abstract away the frontend and backend so that in future if you wish to change the backend stack the it will be easy to update, also making API requests to the express server in the asyndata would be good.

[Vue.js] Call function from imported helper class in Vue.js component data Subscribe to RSS

when trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.

I tried out some solutions from here, but didn’t help:
Vue.js: Import class with function and call it in child component

https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266

This is what I tried so far, any ideas?

there is a helper class myHelper.js:

export default myHelper {
myHelperFunction(param) {
return param;
}
}

there is a vue.js component MyComponent.vue:

<template>
<v-text-field :rules=”[myRule]“></v-text-field>
</template>

<script>
import myHelper from ‘./myHelper.js’;

export default {
name: ‘MyComponent’,
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>

Solution :

You are not really exporting the class. It is a plain object. To export a class instead of an object do this:

// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}

Also, you do not need:

components: {
myHelper,
},

Rest of the code stays the same.

[Vue.js] Vue + Express app on heroku not using the SPA in server/public folder Subscribe to RSS

My app is running on heroku and the routes send me JSON files, but what I need is to use the SPA that is in my ./server/public folder as index.html.
When I open the heroku app it send me the JSON file that is sent from the “/“ route, but I need it to use the vue.js SPA, because of what I did in my front-end client if for some reason you go to a route that doesn’t exists it does redirect me to my “/forum” route with the front-end client, but any other route that exists will not work, it will keep sending the JSON of that route.

app/server.js

const express = require(‘express’);
const path = require(‘path’);
const bodyParser = require(‘body-parser’);
const expressValidator = require(“express-validator”);
const flash = require(‘connect-flash’);
const mongoose = require(‘mongoose’);
const cors = require(“cors”);
const config = require(“./config/database”);
if(process.env.NODE_ENV !== “production”) require(‘dotenv’).config();

mongoose.connect(config.database, { useNewUrlParser: true, useFindAndModify: false });

let db = mongoose.connection;

db.once(“open”, () => {
console.log(“Connected to MongoDB Atlas”);
});

db.on(“error”, (err) => {
console.log(err);
});

const app = express();

//Body-parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());
app.use(expressValidator());
app.use(flash());
app.use(cors());

require(“./passport”)

//Routes
const home = require(“./routes/home.js”);
const forum = require(‘./routes/forum.js’);
const ranking = require(‘./routes/ranking.js’);
const profile = require(‘./routes/profile.js’);

// Routing
app.use(“/“, home);
app.use(“/forum”, forum);
app.use(“/profile”, profile);
app.use(“/ranking”, ranking);

// Handle production build
if (process.env.NODE_ENV === “production”) {
app.use(express.static(__dirname + ‘/public/‘));
app.get(/.*/, (req, res) => { res.sendFile(__dirname + ‘/public/index.html’) });
}

// PORT
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`)
});

Solution :

If you are splitting the frontend and the backend with vue.js and Express, you should probably build and host the vue.js part statically and then have the Express running on Heroku.

Here is a guide on how to deploy the express app, and then you build and deploy the static vue.js page, here are the docs for deploying Vue.

[Vue.js] How to run local node server on subfolder? Subscribe to RSS

For an vuejs application.

I need to emulate, in local, a production environment in witch deploy is on a subfolder, like www.domain.com/subfolder1.

How can I configure my local node server so I the local application run on localhost:port/subfolder1?

Solution :

Welcome to StackOverflow.

If I understand the question right, I believe you would like to setup a Node.js process running a server (example localhost:1337) and you would like to access it @ http://localhost/subfolder.

For that you will need to setup a reverse proxy, such as NGINX
and create a configuration for forwarding connections to the proccess :

server {
listen 80 default_server;
location /subfolder {
# Forward Real IP
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://127.0.0.1:1337;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

NGINX will receive the requests at port 80 and when requested with /subfolder it will forward requests to the Node.js Server running at port 1337.

Hope this helped. Good Luck.

Solution 2:

With an already build on /dist folder. This let me try at localhost:8080/custom-sub-path

var express = require(‘express’);
var app = express();
var path = require(‘path’);

app.use(‘/custom-sub-path/static’, express.static(‘dist/static’));
app.use(‘/custom-sub-path’, express.static(‘dist’));

app.get(‘/custom-sub-path/‘, function(req, res) {
res.sendFile(path.join(__dirname + ‘/dist/index.html’));
});

console.log(‘serving port 8008’);

app.listen(8080);

[Vue.js] Android Cordova build failed (Execution failed for task ' app processDebugResources') Subscribe to RSS

After I run Cordova on android “cordova run android / cordova build” I I got the following error :

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ‘:app:processDebugResources’.
Failed to execute aapt

any thought how we can fix this I tried build/clean didn’t work.

Thanks in Advance.

Solution :

I’m having the same problem, on Friday I did the build normally and on Monday when trying to perform again I get the error ‘Execution failed for task’: app: processDebugResources’” plus some stacktrace on Aapt2Exception: AAPT2 error.

Apparently this has to do with Google launching new versions of support-v4 and api-level update

this link say that installing the cordova-android-support-gradle-release plugin solves the problem.

add the code below in build.gradle in the platforms / android directory

configurations.all {
resolutionStrategy.force ‘com.android.support:support-v4:27.1.0’
}

In my case it did not solve, but I may have done something wrong, I hope it will solve.

-– UPDATE 1

Google has released an update of Google Play service libraries and Firebase on June 17, 2019, I believe our problem is directly related to this. They recommend the following settings:

Upgrade com.android.tools.build:gradle to v3.2.1 or later.
Upgrade compileSdkVersion to 28 or later.
Update the app to use Jetpack (AndroidX); follow the instructions in Migrating to AndroidX.

In the case of Cordova applications I still do not know exactly how to reflect these changes and I’m in the middle of a release cycle of an update of my app, without being able to build, it’s really sad :(

PS:Sorry for my bad English.

[Vue.js] VueJs textarea does not show the stored information when editing Subscribe to RSS

when using Vuejs and have, inside a form, a textarea field.

When editing i can not see the value, inside the textarea.

If i save i do not lose the previous information as expected.

If i edit it stores the data as expected.

I only can not find, how to present the textarea value, when editing.

Inside a v-for loop there is the textarea :

<row v-for=”(field, index) in fields” :key=”index”>
<div v-if=”field.formType === ‘textarea’”>
<va-textarea
:id=”field.index”
v-model=’formInput[index]‘
v-bind:value=”formValue[index]“
\></va-textarea>

The field is defined in the data property :

data () {
return {
fields: {
Commentts: {
label : ‘Commentts’,
sortable : false,
type : ‘textarea’,
formType : ‘textarea’,
formReadOnly : false
}

And there is the formSave method to insert or edit:

methods: {
formSave() {
if ( this.formValue.Id === undefined) {
this.formInput.Motivo_Id = this.formInput.Motivo.id
}
this.saveButton = true;
this.formLoading= true;
this.axios.post(‘Courses/save’,
{
“data”: { Id : this.formValue.Id,
Date : this.saveDateTime(this.formInput.Date),
faculty_Id: this.formInput.faculty_Id,
Commentts: this.formInput.Commentts
},
“route” : this.$route.name,
}).then((response) => {

How can i show the textarea information when editing the form ?

Solution :

Looks strange but let’s figure out.

Loop

<row v-for=”(field, index) in fields” :key=”index”>

By the example fields is the object and variable index contains value “Commentts” and not an index. Is it what you want?

Data propagation

<va-textarea
:id=”field.index”
v-model=’formInput[index]‘
v-bind:value=”formValue[index]“
\></va-textarea>

I know nothing about va-textarea component implementation but I hope parameters v-model and :value were configured properly.

And with current implementation component’s data field must contain and:

data () {
return {
fields: {
Commentts: {
…..
},
formInput: {
Commentts: …some data…
},
formValue: {
Commentts: …some data…
},

Because declaration `v-model=’formInput[index]‘` requires `formInput` field in the root of the data field with `Commentts` inside.

[Vue.js] Changing Vue data based on method parameter Subscribe to RSS

I just started using vue.js and there is a very simple issue that I just can’t get to work! I’m trying to create a mounted event that runs a method with a specific parameter inside it to alter the “show” value of an element. here is the code:

export default {
data(){
return {
one: false,
}
},
methods: {
show: function(el) {
this.el = true;
}
},
mounted(){
this.show(this.one)
}
}

“el” to be just a generic placeholder for whatever “data” name is passed into the method. in the future I may not only have “one” but also “two”, “three” and “four”. the “show” method to be able to take in any reference to one of these 4 options and change its value from false to true.

in the show method, I get the error “‘el’ is defined but never used.”
the only solution I’ve come to is to do an if method “if this.one === el{…}” but that kind of defeats the purpose. any help would be appreciated

Solution :

new Vue({
el: ‘#editor’,
data: {
el: false,
item : ‘’
},
computed: {

},
methods: {
show (passedValue, item) {
this.item = item
this.el = passedValue
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/marked@0.3.6"></script>
<script src=”https://unpkg.com/lodash@4.16.0"></script>
<div id=”editor”>

<div id=”div1” v-if=”el===true && item ==’div-1’” class=”show”>
div1 displayed
</div>
<div id=”div-2” v-if=”el===true && item ==’div-2’” class=”show”>
div2 displayed
</div>
<button v-on:click=”show(true, ‘div-1’)”>show div1</button>
<button v-on:click=”show(false, ‘div-1’)”>hide div1</button>

<button v-on:click=”show(true, ‘div-2’)”>show div2</button>
<button v-on:click=”show(false, ‘div-2’)”>hide div2</button>
</div>

Solution 2:

export default {
data(){
return {
one: false,
}
},
methods: {
show(bol) {
this.one = bol;
}
},
mounted(){
this.show(this.one)
}
}

Use above code it would work.