I’m starting to use vuetify along with a ‘payment gateway’ that I’m learning, but I’ve had a little problem.

If there is a form like this:

<form @submit.prevent=”continuar” id=”customer-form”>
<div class=”card-errors”></div>
<div class=”form-group”>
<label>Nombre del usuario de tarjeta</label>
<input type=”text” data-epayco=”card[name]“>
</div>
<div class=”form-group”>
<label>Email</label>
<input type=”text” data-epayco=”card[email]“>
</div>
…
<button type=”submit”>Pagar ahora!</button>
</form>

The “Token” parameter returns a value that is not undefined.

continuar(event){

ePayco.token.create(event.target, (error, token) => {
if(!error) {
console.log(“token: “ + token)
} else {
console.log(error)
}
})
},

But when I use vuetify the “Token” parameter returns “undefined” even when the “Epayco” library shows a message that everything has happened correctly.

<form id=”customer-form” @submit.prevent=”continuar”>
<div class=”card-errors”></div>
<v-layout row align-center>
<v-flex md3 offset-md1 class=”mr-3”>
<v-layout justify-end>
<span>Nombre en la tarjeta*</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco=”card[name]“/>
</v-flex>
</v-layout>
<v-layout row align-center>
<v-flex md3 offset-md1 class=”mr-3”>
<v-layout justify-end>
<span>Email</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco=”card[email]“/>
</v-flex>
</v-layout>
……
<v-layout class=”my-3” justify-center>
<v-btn type=”submit”>Pagar</v-btn>
</v-layout>
</form>

Does anyone know why the problem?

It should be noted that when an error occurs the parameter ‘error’ returns the error and not undefined

Solution :

According to the example here it appears you should be using the ePayco.token.create() function a bit differently.

epayco.token.create(paymentDetails)
.then(function(token) {
console.log(token);
})
.catch(function(err) {
console.log(“err: “ + err);
});

I’m using the latest version of Nuxt JS 2.8.1 to build a hybrid app. I’m utilising the modules mode of Vuex as it’s recommended to do this in order for me to save data and access it across different pages, components and layouts.

On one particular page, a settings page that I’ve built there is a Vuetify switch, essentially a toggle which will push a value of either true or false, I’m using this to implement a dark mode feature and conditionally render styling on the page.

My toggle switch will parse a list of settings which get updated via the v-model on the input and then committed to my store:

HTML

<v-list-tile avatar>
<v-list-tile-action>
<v-switch color=”primary” v-model=”settings.darkMode” @change=”saveSetting(‘darkMode’)”></v-switch>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dark mode</v-list-tile-title>
<v-list-tile-sub-title>Toggle app’s dark mode.</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>

My JS

data () {
return {
settings: {
darkMode: false,
dataSaver: false,
},
retrieveSettings: null,
isClearing: {
local: false,
sessions: false,
all: false
}
}
},
methods: {

/**
* Save settings to storage
*/
saveSetting() {
localStorage.setItem(‘my_settings’,JSON.stringify(this.settings));
var beacon_settings = JSON.parse(localStorage.getItem(‘my_settings’));
this.retrieveSettings = beacon_settings
this.$store.commit(‘settings/add’, {
darkMode: this.settings.darkMode,
dataSaver: this.settings.dataSaver
})
}

}

My store/settings.js file (Vuex)

export const state = () => ({
settings: []
})

export const mutations = {
add (state, settingsObject) {
state.settings.push(settingsObject)
}
}

This will successfully push the data that I can retrieve via a computed property in other pages of my website, however, every time I toggle the switch, it will push a new object into the settings array rather than update the existing one, e.g:

[
{
darkMode: true,
dataSaver: false
},
{
darkMode: false,
dataSaver: false
}
]

Preferably I’d like to just update the existing object that was pushed, rather than push another one, I’m struggling with this bit and can’t seem to figure this out. I might need to do something with $set but not too sure.

Solution :

The outcome is exactly what should be expected using:

state.settings.push(settingsObject)

I would recommend to go along with what was already commented and use an object instead of an array.

Use: settings: {} insted of settings: [] to declare an object and change state.settings.push(settingsObject) to state.settings = settingsObject to override the existing object instead of adding a new object to an array.

See: https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules for more information and explanation.

Solution 2:

The easy way to this you can use the vuex-map-fields npm package. As you are using the list of items you have to use mapMultiRowFields. What you have to do simply generate the automated computed property & on update It will automatically set/update the value in store as well. the code will be like

HTML:-

<v-list-tile avatar>
<v-list-tile-action>
<v-switch color=”primary” v-model=”settings.darkMode” @change=”saveSetting(‘darkMode’)”></v-switch>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dark mode</v-list-tile-title>
<v-list-tile-sub-title>Toggle app’s dark mode.</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>

Js:-

import { mapMultiRowFields } from ‘vuex-map-fields’;
export default {
data () {
return {
retrieveSettings: null,
isClearing: {
local: false,
sessions: false,
all: false
}
}
},
computed: {
…mapMultiRowFields([‘settings’]),
},
methods: {

/**
* Save settings to storage
*/
saveSetting() {
localStorage.setItem(‘my_settings’,JSON.stringify(this.settings));
var beacon_settings = JSON.parse(localStorage.getItem(‘my_settings’));
this.retrieveSettings = beacon_settings
}

}
}

I’m creating a table inside a .NET Core Web Application with several rows and columns and the contents are being called using MSSQL server with a WEB API

Since there is more than one row and column, I need a for loop inside my <div> tag

This is what I was able to find.

v-for=”(FirstName, LastName, UserID) in tableData>

Solution :

If you are attempting to loop over multiple values from the tableData, you can destructure it like this:

<tr v-for=”{FirstName, LastName, UserID} in tableData” :key=”UserID”>
<td> {FirstName} </td>
<td> {LastName} </td>
<td> {UserID} </td>
</tr>

However, the question does not seem clear.

Solution 2:

the question isn’t very narrative. But if you are looking to loop over the result of the query and generate the rows dynamically:

<tr v-for=”user in tableData” :key=”user.id”>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>

The properties depending on the rows you have in the tables & the rows you want to return (.id, .name, .email are just examples here)

there is an array of objects each object contains a name property and a value property

what to do is return the value for the specified name

when using a computed property

computed: {
statAlertCount() {
var stat = this.siteStatistics.filter(item => {
console.log(item);
return item.name == “site_alert_count”;
});
console.log(stat[0]);
}
}

this code returns and object ‘stat’ which i can console out. it looks like this.

but if I try to access the value using stat[0].stat then I get the following error

app.js?id=f37d3d495892e39c6054:85474 [vue.js warn]: Error in render: “TypeError: Cannot read property ‘stat’ of undefined”

Solution :

I think you just need to return:

computed: {
statAlertCount() {
var stat = this.siteStatistics.filter(item => item.name === “site_alert_count”);

return stat.length > 0 ? stat[0].stat : ‘’;
}
}

Solution 2:

An alternative solution using find:

computed: {
statAlertCount() {
return this.siteStatistics.find(item => item.name == “site_alert_count”).state;
}
}

Where do I place links like these:

<link rel=”icon” type=”image/png” href=”images/icons/favicon.ico”/>

<link rel=”stylesheet” type=”text/css” href=”vendor/bootstrap/css/bootstrap.min.css”>

<link rel=”stylesheet” type=”text/css” href=”fonts/font-awesome-4.7.0/css/font-awesome.min.css”>

<link rel=”stylesheet” type=”text/css” href=”fonts/iconic/css/material-design-iconic-font.min.css”>

<link rel=”stylesheet” type=”text/css” href=”vendor/animate/animate.css”>

<link rel=”stylesheet” type=”text/css” href=”vendor/css-hamburgers/hamburgers.min.css”>

<link rel=”stylesheet” type=”text/css” href=”vendor/animsition/css/animsition.min.css”>

<link rel=”stylesheet” type=”text/css” href=”vendor/select2/select2.min.css”>

<link rel=”stylesheet” type=”text/css” href=”vendor/daterangepicker/daterangepicker.css”>

<link rel=”stylesheet” type=”text/css” href=”css/util.css”>
<link rel=”stylesheet” type=”text/css” href=”css/main.css”>”

It gives me error if I just place them in the beginning or end of a .vue.js file, and it would be redundant, cause I need them available for all the project

Solution :

.vue.js single file component format doesn’t allow for arbitrary tags. If there’s a need for <link> and its type is suitable for <body>, it can be placed into <template> block. Stylesheets can be provided as <style> blocks and don’t need <link>. <link rel=”icon”> isn’t body-ok and needs to be placed in <head>, so it’s not suitable for a component that was placed in <body>.

Solution 2:

If the using the Vue-CLI place external links and scripts on the <head> Tag in the index.html file. You can find this under the public folder.

Otherwise if you want to import an external file to a component you can do it like:

<style src=”/.styleone.css”></style>
<style src=”./styletwo.css”></style>
<style src=”./stylethree.css”></style>

Whenever I try to use a simple

<router-link to=”https://google.com">
Google
</router-link>

it renders the link to http://localhost:8080/https:/google.com

router.js

export default new Router({
mode: ‘history’,
base: process.env.BASE_URL,
)}

and there is no .env file. Whenever I create the .env and add BASE_URL=http://localhost:8080 it renders http://localhost:8080/http:/localhost:8080/https:/google.com

Have anyone experienced this issue?

UPDATE
The example above reflects external websites but this is also happening with internal links. Example:

<router-link avatar :to=”{name: ‘author’, params: {id: author.id, name: author.name}”> foo </router-link>

definition author’s route

{
path: ‘/author/:id/:name’,
name: ‘author’,
component: Author
},

Everything was working okay some days ago but there must be something I added that changed this behaviour. there is looked everywhere but can’t seem to find where all went wrong.

Solution :

Yes, use a normal <a href=””></a> a href tag for external links. Vue-router and router-link are primarily for instance resources.

when in the guzzle controller making a request to an external api.

I wanna use an id from the user who is logged in.

there is been doing the request with a static id, but now it dynamically.

I tried like this:

$science = Auth::user()->science_id;

$client = new Client([‘headers’ => [‘Accept’ => ‘application/json’]]);

$request = $client->get(
‘https://url\_to\_the\_api/'.$science.'/degree',
[
‘auth’ => [‘client’, ‘secret’],
]

);

$data = $request->getBody()->getContents();

return $data;

And there is the error

500(internal server error)

and this message:

“Trying to get property ‘science_id’ of non-object”

What am i missing?

Thanks for the time

Solution :

If you are using it in web app then make sure you first check if user is already authenticated by using auth middleware or manually by using Auth::check() function.

Or

If you are trying to hit this by api that will not work here because session will not be maintained in that case. That’s why JWT tokens were introduced to maintain the state of an application.

Solution 2:

I’ve solved it like this:

$science = auth(‘api’)->user()->science_id;

Thanks for the help!

I wanted to host 2 node app on one Linux box from AWS EC2. Where I can run a dev environment and staging environment. I noticed that I will have to use different ports on both of the apps but this is not the problem that when facing.

Using the staging side which has always worked on the previous boxes that there is started it on to go first, making sure it works before trying out the different ports.

there is a backend node.js using express and a static webpage built with vue.js CLI. Where the express app will use app.use(express.static(‘static’)); to host the static webpage. Then proceed with hosting it on PM2 with pm2 start /directoryToDist/main.js. Once the daemon has started, I did a curl http://localhost:80/ but it returns an error HTML page of Cannot GET /.

When I did npm install, npm rebuild and npm build on both apps. Made sure that the dist folder was built properly. Then did a sudo -i and pm2 start /directoryToDist/main.js. Making sure that a node app is running I did a ps -ef | grep js to show that it is running as so. There are no restarts on the pm2 mounted app and everything was running smoothly. I did the curl http://localhost/ after and it did return Cannot GET /.

I did a zip file transfer of a working app in previous boxes and did the necessary installation of npm and run it. Expecting it to work like previous boxes but it didn’t. showing the same error of Cannot GET /.

Node js build script

“build”: “rimraf dist/ && babel ./ –out-dir dist/ –ignore ./node_modules,./babelrc,./package.json,/.npm-debug-log,./static/* –copy-files”

vue.js js build script

“build”: “node build/build.js”

Rebuild script that I use

cd api
npm run build
cd ..
cd pwa
npm run build
cd ..
sudo rm -rf api/dist/static
sudo mkdir -p api/dist/static
sudo cp -r pwa/dist/* api/dist/static/
sudo chown -R ubuntu.ubuntu *

Let me know if you need to see more

The actual result is to serve a proper 200 message on the curl before given a domain to the specific port.

Solution :

Found a solution that has worked.

Pm2 was not pointing to the current working directory. sudo -i and then running it $ pm2 start /home/user/directory will look for for module routes in the directory folder instead of the implemented dist folder.

So by solving this problem. One must traverse through the directory first and initiate the pm2 start there. $ cd /home/user/directory/dist/ $ pm2 start main.js. This has served the node app well and stable.

These are my steps:

Add dummy text
Increase/decrease font-size on button click

when using Vue, Javascript and jQuery for it.
Now i get the right font-size, but only when i add a new text. But it should be dynamically.

thx for help

<input type=’button’ value=’-‘ class=’qtyminus’ field=’quantity’ />
<input type=’text’ name=’quantity’ value=’0’ class=’qty’ />
<input type=’button’ value=’+’ class=’qtyplus’ field=’quantity’ />

var currentVal = 12;

$(‘.qtyplus’).click(function(e){

e.preventDefault();

currentVal = parseInt($(‘input[name=quantity]‘).val());

if (!isNaN(currentVal)) {

$(‘input[name=quantity]‘).val(currentVal + 1);
} else {

$(‘input[name=quantity]‘).val(0);
}
});
$(“.qtyminus”).click(function(e) {

e.preventDefault();

currentVal = parseInt($(‘input[name=quantity]‘).val());
if (!isNaN(currentVal) && currentVal > 0) {

$(‘input[name=quantity]‘).val(currentVal - 1);
} else {

$(‘input[name=quantity]‘).val(0);
}
});

document.getElementById(‘buttonFabric’).addEventListener(“change”, function (e) {
canvas.add(new fabric.IText(‘Tap and Type’, {
left: 0,
top: 0,
fontFamily: ‘arial black’,
fill: ‘#333’,
fontSize: currentVal,

}));
});

Solution :

Got it

$(‘.qtyplus’).click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name

// Get its current value
currentVal = parseInt($(‘input[name=quantity]‘).val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(‘input[name=quantity]‘).val(currentVal + 1);

if(currentVal!=’’)
{
var activeObj = canvas.getActiveObject();
//Check that text is selected
if(activeObj==undefined)
{
alert(‘Please select a Text’);
return false;
}
activeObj.set({
scaleX:1,
scaleY:1,
fontSize: currentVal
});
canvas.renderAll();
}

} else {
// Otherwise put a 0 there
$(‘input[name=quantity]‘).val(0);
}
});
// This button will decrement the value till 0
$(“.qtyminus”).click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name

// Get its current value
currentVal = parseInt($(‘input[name=quantity]‘).val());
// If it isn’t undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(‘input[name=quantity]‘).val(currentVal - 1);

if(currentVal!=’’)
{
var activeObj = canvas.getActiveObject();
//Check that text is selected
if(activeObj==undefined)
{
alert(‘Please select a Text’);
return false;
}
activeObj.set({
scaleX:1,
scaleY:1,
fontSize: currentVal
});
canvas.renderAll();
}

} else {
// Otherwise put a 0 there
$(‘input[name=quantity]‘).val(0);
}
});

The Problem

there is a “products” array with multiple objects. Each product object contains the property “price”. to watch this property in each product for possible changes. when using this to calculate a commission price when the user changes the price in an input box.

My products array looks like this;

[
0: {
name: …,
price: …,
commission: …,
},
1: {
name: …,
price: …,
commission: …,
},
2: {
name: …,
price: …,
commission: …,
},
…
…
…
]

My code

I’ve tried this, but it doesn’t detect any changes except for when the products are first loaded;

watch : {
// Watch for changes in the product price, in order to calculate final price with commission
‘products.price’: {
handler: function (after, before) {
console.log(‘The price changed!’);
},
deep : true
}
},

The products are loaded like this;

mounted: async function () {
this.products = await this.apiRequest(‘event/1/products’).then(function (products) {
// Attach reactive properties ‘delete’ & ‘chosen’ to all products so these can be toggled in real time
for (let product of products) {
console.log(product.absorb);
Vue.set(product, ‘delete’, false);
Vue.set(product, ‘chosen’, product.absorb);
}

console.log(products);

return products;
})
}

Other questions I’ve looked at
Vue.js watching deep properties
This one is trying to watch a property that does not yet exist.
VueJs watching deep changes in object
This one is watching for changes in another component.

Solution :

You can’t really deep-watch products.price, because price is a property of individual product, not the products array.

Declarative watchers are problematic with arrays, if you attempt to use an index in the watch expression, e.g products[0].price, you get a warning from Vue

[vue.js warn]: Failed watching path: products[0].price. Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

What this means is you can use a programmatic watch with a function, but it’s not explained all that well.

Here is one way to do it in the scenario

<script>
export default {
name: “Products”,
data() {
return {
products: []
};
},
mounted: async function() {
this.products = await this.apiRequest(‘event/1/products’)…

console.log(“After assigning to this.products”, this.products);

// Add watchers here, using a common handler
this.products.forEach(p => this.$watch(() => p.price, this.onPriceChanged) );

// Simulate a change
setTimeout(() => {
console.log(“Changing price”);
this.products[0].price= 100;
}, 1000);
},
methods: {
onPriceChanged(after, before) {
console.log(before, after);
}
}
};
</script>

Here is my test Codesandbox (I use color instead of price because there’s no price in the test api)

Solution 2:

If I understood, you want to watch a specific prop in the array of objects. Please check this example on codepen. In this example I created a method in which the old value will be stored in a separate variable. You can also delay the changes in watcher wit setTimeout function if you want.

new Vue({
el: ‘#app’,
methods: {
setValue: function() {
this.$data.oldPeople = _.cloneDeep(this.$data.people);
},
},
mounted() {
this.setValue();
},
el: ‘#app’,
data: {
people: [
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 32},
{id: 2, name: ‘Joe’, age: 38}
],
oldPeople: []
},
watch: {
people: {
handler: function (after, before) {
// Return the object that changed
var vm = this;
let changed = after.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== vm.$data.oldPeople[idx][prop];
})
})
// Log it
vm.setValue();
console.log(changed)
},
deep: true,
}
}
})