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.

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.

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).

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

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.

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 )

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

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>

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…)” />

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) };
}
}