link3014 link3015 link3016 link3017 link3018 link3019 link3020 link3021 link3022 link3023 link3024 link3025 link3026 link3027 link3028 link3029 link3030 link3031 link3032 link3033 link3034 link3035 link3036 link3037 link3038 link3039 link3040 link3041 link3042 link3043 link3044 link3045 link3046 link3047 link3048 link3049 link3050 link3051 link3052 link3053 link3054 link3055 link3056 link3057 link3058 link3059 link3060 link3061 link3062 link3063 link3064 link3065 link3066 link3067 link3068 link3069 link3070 link3071 link3072 link3073 link3074 link3075 link3076 link3077 link3078 link3079 link3080 link3081 link3082 link3083 link3084 link3085 link3086 link3087 link3088 link3089 link3090 link3091 link3092 link3093 link3094 link3095 link3096 link3097 link3098 link3099 link3100 link3101 link3102 link3103 link3104 link3105 link3106 link3107 link3108 link3109 link3110 link3111 link3112 link3113 link3114 link3115 link3116 link3117 link3118 link3119 link3120 link3121 link3122 link3123 link3124 link3125 link3126 link3127 link3128 link3129 link3130 link3131 link3132 link3133 link3134 link3135 link3136 link3137 link3138 link3139 link3140 link3141 link3142 link3143 link3144 link3145 link3146 link3147 link3148 link3149 link3150

[Vue.js] How to update nested Objects

to use the $push method to push an object into a nested array. But i cant get it to work that you can dynamically get the right object inside of the array. Let me explain better by showing the code.

This is my Schema:

var StartedRaceSchema = new mongoose.Schema({
waypoints: {
type: Object,
name: String,
check_ins: {
type: Object,
user: {
type: Object,
ref: ‘User’
}
}
}
});

When you check in on a waypoint, it has to be pushed in the correct waypoints nested Check_ins

This is the code for the update:

StartedRace.findByIdAndUpdate(req.params.id,
{ $push: { ‘waypoints.1.check_ins’: req.body.user } },
function (error) {
if (error) {
console.log(error)
res.send({
success: false,
error: error
})
} else {
res.send({
success: true
})
}
}
)

As you can see i can only get it to work with fields like:

‘waypoints.1.check_ins’

That 1 needs to be dynamically because it gets send within the parameters.
But i can not get it to work dynamically, only hard coded.

Does anyone know how to do this?

Solution :

Populate the collection with a list of check_ins enumerated by their ids.

waypoints.check_ins = {
…waypoints.check_ins,
[response.id]: response
}

You’d then have a list of check_ins that can referenced by their ids.

Solution 2:

You could try this syntax instead of the dot notation:

let id = req.params.id;
StartedRace.findByIdAndUpdate(req.params.id,
{ $push: { waypoints: { id: { check_ins: req.body.user } } } }, { new : true } )
.exec()
.then(race => console.log(race))
.catch(err => err);

I used a Promise, but it’s the same with a callback.

[Vue.js] Duplicate Vue component instance

How i can duplicate a vue.js component instance after mount with new dom ?

I trying to code for a template builder and to duplicate some blocks.

Like duplicate function of this site

Solution :

The example the show is not dom duplication since left comp is just a button and right comp handle other events.

Why duplicate after mount? You can duplicate components declaration in the code.

This is a valid template like the example:

<div>
<my-component style=”width:10%” :data=”data”/>
<my-component style=”width:90%” :data=”data”/>
</div>

Any change in data will be seen in both instances since they “watch” the same data.

[Vue.js] Push Unique Array in Object | Vuejs

i would like to push unique Array into an Object using the key Name

i tried this code but still not working. Any help ? Thank you !

addArray(){
if (!this.sessions.hasOwnProperty(name)) {
this.sessions.push(this.item);
}
},

Solution :

this.sessions.push(this.item);

This line means that sessions is an array. So if you want to push unique objects with key Name into sessions array you can check below:

addIntoArray(yourNewlyAddedObject){
var is_in = false;
this.sessions.forEach(function (session) {
if (session.Name === yourNewlyAddedObject.Name) is_in = true;
});
return is_in;
},

Check new item with addIntoArray(obj) function. If this function return true then this means the currently added object key “Name” is already in array. Else it returns false. So add this object to sessions array if current object with key Name if not exist in array (when function returns false).

[Vue.js] Json server POST request not working by axios

Hello Im using this json server https://github.com/typicode/json-server
I can post data in postmman and its working good for example object

{
“mainTab”:{
“m_actual”:0,
“m_refresh”:2000,
“m_actual”:0,
“m_refresh”:4000
}
}

with header Content-Type: application/json
To my server is running http://35.195.249.40:3004/users

And everything is ok

But on my app in nativescript/vue.js I cant make post request - its gives 304 response

updateJsonData(){
const data = {

m_actualHP: 0,
m_refreshHP: 2000,
m_actualMP: 666666,
m_refreshMP: 4000,

}

axios.post(‘http://35.195.249.40:3004/users', data, {
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’

}
}
)
.then(function (response) {
console.log(response);

})
.catch(function (error) {
console.log(error);
});

},

I tried with fetch request too and it response
‘parsing failed: ‘ [TypeError: Network request failed: java.io.IOException: Cleartext HTTP traffic to not permitted]

updateJsonData(){
fetch(‘http://35.195.249.40:3004/users', {
method: ‘post’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
“title”: “Add a blogpost about Angular2”,
“dueDate”: “2015-05-23T18:25:43.511Z”,
“done”: false
})
}).then(function(response) {
return response.json()
}).then(function(json) {
console.log(‘parsed json: ‘, json)
}).catch(function(ex) {
console.log(‘parsing failed: ‘, ex)
});

},

Solution :

In the Postman example object you provided

{
“mainTab”: {
“m_actual”:0,
“m_refresh”:2000,
“m_actual”:0,
“m_refresh”:4000
}
}

The fields are embedded in an object accessible via the mainTab key.
However, in the actual code examples you are providing the object with the desired fields (like m_refresh) directly and not in an embedded manner.

So, my suggestion is to wrap the object containing the data to make the posting call look like this:

axios.post(‘http://35.195.249.40:3004/users', { mainTab: data },
{
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’
}
}
)

Solution 2:

these provided axios.post provide this code in response

{ data: ‘’,
JS: status: null,
JS: statusText: ‘’,
JS: headers: {},
JS: config:
JS: { adapter: { [Function: xhrAdapter] [length]: 1, [name]: ‘xhrAdapter’, [prototype]: [Object] },
JS: transformRequest: { ‘0’: [Object] },
JS: transformResponse: { ‘0’: [Object] },
JS: timeout: 0,
JS: xsrfCookieName: ‘XSRF-TOKEN’,
JS: xsrfHeaderName: ‘X-XSRF-TOKEN’,
JS: maxContentLength: -1,
JS: validateStatus: { [Function: validateStatus] [length]: 1, [name]: ‘validateStatus’, [prototype]: [Object] },
JS: headers:
JS: { Accept: ‘application/json’,
JS: ‘Content-Type’: ‘application/json’ },
JS: method: ‘post’,
JS: url: ‘http://35.195.249.40:3004/users',
JS: data: ‘{“data”:{“mainTab”:{“m_actualHP”:0,”m_refreshHP”:2000,”m_actualMP”:666666,”m_refreshMP”:4000}}’ },
JS: request:
JS: { UNSENT: 0,
JS: OPENED: 1,
JS: HEADERS_RECEIVED: 2,
JS: LOADING: 3,
JS: DONE: 4,
JS: _responseType: ‘’,
JS: textTypes:
JS: [ ‘text/plain’,
JS: ‘application/xml’,
JS: ‘application/rss+xml’,
JS: ‘text/html’,
JS: ‘text/xml’,
JS: …
JS: ‘CONSOLE LOG END | CONSOLE DIR STARTS’
JS: ==== object dump start ====
JS: data: “”
JS: status: “null”
JS: statusText: “”
JS: headers: {}
JS: config: {
JS: “transformRequest”: {},
JS: “transformResponse”: {},
JS: “timeout”: 0,
JS: “xsrfCookieName”: “XSRF-TOKEN”,
JS: “xsrfHeaderName”: “X-XSRF-TOKEN”,
JS: “maxContentLength”: -1,
JS: “headers”: {
JS: “Accept”: “application/json”,
JS: “Content-Type”: “application/json”
JS: },
JS: “method”: “post”,
JS: “url”: “http://35.195.249.40:3004/users",
JS: “data”: “{\“data\“:{\“mainTab\“:{\“m_actualHP\“:0,\“m_refreshHP\“:2000,\“m_actualMP\“:666666,\“m_refreshMP\“:4000}}”
JS: }
JS: request: {
JS: “UNSENT”: 0,
JS: “OPENED”: 1,
JS: “HEADERS_RECEIVED”: 2,
JS: “LOADING”: 3,
JS: “DONE”: 4,
JS: “_responseType”: “”,
JS: “textTypes”: [
JS: “text/plain”,
JS: “application/xml”,
JS: “application/rss+xml”,
JS: “text/html”,
JS: “text/xml”
JS: ],
JS: “_listeners”: {},
JS: “_readyState”: 4,
JS: “_options”: {
JS: “url”: “http://35.195.249.40:3004/users",
JS: “method”: “POST”,
JS: “headers”: {
JS: “Accept”: “application/json”,
JS: “Content-Type”: “application/json”
JS: },
JS: “content”: “{\“data\“:…

I figured out axios would not work with http. It needs https.
Is there possibility to make it working without https?

other solution could be running json server with https.
Im using this server so what im doing im make npm start in ubuntu and server starts
https://github.com/halfzebra/json-server-example

there is written on github to use https://github.com/typicode/hotel this to provide https but it working on localhost. I need to run it on global IP over https

[Vue.js] Why I can connect localhost but can't connect IP address?

I’ve init a project using vue/cli, and I run npm run serve, webpack starts successfully, and shows the infomation:

The Network address is my local ip, obviously. When I access my page with the address http://localhost:8451/, it worked; however, when I visit http://172.18.149.70:8451/, the page just kept loading and nothing shows.

127.0.0.1:8451 also worked.

Why this happened?

Solution :

The Network IP address is probably that for the Internet Service Provider or the public IP address.

[Vue.js] Referring to properties passes as props in Vue.js components

I’ve started working on a board game prototype and decided to go with Vue.js. there is some experience with JavaScript and everything was going fine … until I tried to access a property passed with ‘props’ in a component.

Here’s the whole code:

<!DOCTYPE HTML>

<html>

<head>
<title>Board</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<style type=”text/css”>

#board {
width: 600px;
}
.square { width: 100px; height: 100px; margin: 1px; border: 1px solid grey; display: inline-block; float: left; }
</style>
</head>

<body>

<div id=”board”>

<square v-for=”square in squares”></square>

</div>

<script>
var app = new Vue({
el: ‘#board’,
data: {
squares: []
}
})

const rows = 5
const cols = 5
const reservedLocation = { row: 2, col: 2 }

Vue.component(‘square’, {
props: [
‘row’,
‘col’,
‘type’,
],
template: ‘<div class=”square” v-on:click=”logLocation”></div>’,
methods: {
logLocation: function() {
console.log(this)
console.log(“Location: “ + this.col + “x” + this.row )
},
},
})

for (var row=0; row<rows; row++) {
for (var col=0; col<cols; col++) {
const type = (row == reservedLocation.row && col == reservedLocation.col) ? ‘reserved’ : ‘empty’
app.squares.push({ row: row, col: col, type: type })
}
}

</script>

</body>

</html>

What’s happening there is the “board” div is filled with the “square” components. Each square component has the ‘row’, ‘col’ and ‘type’ properties, passed to it as ‘props’. When the user click on a square, the ‘logLocation’ function of the corresponding component is called and all that function does is, it logs the ‘row’ and ‘col’ properties.

Everything works fine except the message logged is: “Location: undefinedxundefined”, in other words, both this.col and this.row seems to be undefined. I’ve checked ‘this’, and it seems to be the correct component.

I’m sure it’s something obvious but I couldn’t find an answer in either the official documentation, in tutorials or even here, on Stack Overflow itself perhaps I’m not using the correct terms.

A bit of new info: the ‘row’ and ‘col’ properties are set on the component object and in the ‘$props’ property but the value they return in ‘undefined’. Am I, somehow, passing the parameters incorrectly?

Solution :

You’ve defined the props correctly, and you’re accessing the props correctly, but you haven’t actually set them to any value. The markup:

<square v-for=”square in squares”></square>

doesn’t pass the props to the component. Perhaps you want something like

<div v-for=”row in rows” :key=”row”>
<div v-for=”col in cols” :key=”col”>
<square :row=”row” :col=”col”></square>
</div>
</div>

Solution 2:

Try to use

console.log(“Location: “ + this.$props.col + “ x “ + this.$props.row )

[Vue.js] CORS - multiple values in Access-Control-Allow-Origin

I’ve tried to fetch data from Wordpress API in vue.js App.
when using DigitalOcean with Apache.

I’ve set Header set Access-Control-Allow-Origin “*“ in vhost.

But now I’ve got an error like this:

Access to XMLHttpRequest at xxx from origin ‘http://localhost:3000' has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:3000, *‘, but only one is allowed.

when using axios for requests.

Do you have any ideas what’s going on?
Is it server side issue or should I set something in axios config?

Thanks.

Solution :

This is a server-side issue. You need to enable CORS in the apache config, by either:

Setting Header set Access-Control-Allow-Origin “*“ - meaning that all origins are allowed to make requests to this server
Setting Header set Access-Control-Allow-Origin “http://localhost:3000"

This tells the server to accept requests from this origin(s), to further explain.

https://enable-cors.org/server\_apache.html

[Vue.js] Vue conditional * css style loader

My vue.js app is shared between web page and electron app on touch device. On this touch device to include extra style. So in my App.vue.js there is:

<script>
var is_electron = process.hasOwnProperty(“versions”) && process.versions.hasOwnProperty(“electron”)
var is_embedded = is_electron && require(“electron”).remote.process.argv.includes(“-e”)
</script>
<style>
* {
transition-property: none !important;
transform: none !important;
animation: none !important;
cursor: none !important;
}
</style>

How can I conditionally include this * style ?

Solution :

If the platform-specific styling is minimal, I would suggest to use some helper classes. You can even style subcomponents by scoping the css within one of these selectors.

<template>
<main :class=”classes”>
<!– Hello world –>
</main>
</template>

<script>
var isElectron = process.hasOwnProperty(“versions”) && process.versions.hasOwnProperty(“electron”)
var isEmbedded = isElectron && require(“electron”).remote.process.argv.includes(“-e”)

export defualt {
name: ‘App’,

computed: {
classes () {
return {
electron: isElectron,
embedded: isEmbedded
}
}
}
}
</script>

<style>
.electron:not(.embedded) * {
border: 1px solid blue;
}

.embedded:not(.electron) * {
/* What kind of sorcery is this? */
}

.electron.embedded * {
border: 1px dotted red;
}

main:not(.electron):not(.embedded) * {
border: 1px dashed green;
}
</style>

[Vue.js] Vue.js and Vuetify Call method when clicking an item

I’m new to javascript and Vue.js. when trying to switch vue-bootstrap to vuetify.
What to do is to call a method when clicking a dropdown item.

My previous code using vue-bootstrap is like this.

<! — This part is inside for loop –>
<b-dropdown variant=”transparent”>
<b-dropdown-item @click=”aMethod(index, ‘Hello’)”>A</b-dropdown-item>
<b-dropdown-item @click=”aMethod(index, ‘Bye’)”>B</b-dropdown-item>
</b-dropdown>

And now to do this using vuetify but how can I call method?

<v-overflow-btn label=”A” :items=”aList” />


aList: [{text: ‘A’},{text: ‘B’}]

to pass the index as a parameter to the method.

Also how can I make the default label the same looking as the items like dropdown in bootstrap does?

Solution :

You can add a @change event on you button:

<v-overflow-btn label=”A” :items=”aList” @change=”aMethod(arg1, arg2, etc…)” />

[Vue.js] Is is possible to send data from the template to the script with Vue.js ? (Inverse of v-bind)

to know if it’s possible to send the current data in v-for loop (in template) to , for example, a function in methods.

<li v-for=”annonce in annonces”>

<article>
//Here for example to send annonce.categorie to the methods
//object of the component to change the color in function of the
//anonce.categorie string
<a v-bind:style=”[‘color’ : {getColorCat(annonce)}]“>
{annonce.categorie}
</a>
</article>

</li>

EDIT
Just add the function with the parameter to send in v-bind:style, and create a method that return the string color in function of the current element in the loop.

<a v-bind:style=”getStyle(annonce)”>{annonce.categorie}</a>

methods:{

getStyle(annonce) {
return { color: this.getColorCat(annonce) };
},

getColorCat(annonce) {

switch(annonce.categorie)
{
case this.categories[0] :
return ‘limegreen’
break;

case this.categories[1] :
return ‘grey’
break;

case this.categories[2] :
return ‘deepskyblue’
break;

case this.categories[3] :
return ‘#E3E01F’
break;

case this.categories[4] :
return ‘silver’
break;

case this.categories[5] :
return ‘pink’
break;

case this.categories[6] :
return ‘red’
break;

case this.categories[7] :
return ‘green’
break;

case this.categories[8] :
return ‘purple’
break;

case this.categories[9] :
return ‘magenta’
break;
default :
}
}
},

Solution :

Yes, you can do that in a straightforward manner

<ul>
<li v-for=”(item, index) in items”>
{getText(index)}
</li>
</ul>

and in the methods

methods: {
getText(index) {
return someFunctionOf(index);
}
}

Updated to add:

You can also use methods to set attribute values, but the syntax in the example is wrong. There are several ways to fix it, but one approach is:

<a v-bind:style=”getStyles(annonce)”>

and then return an object with relevant styles

methods: {
getStyles(annonce) {
return { color: getColorCat(annonce) };
}
}