I’m using an EventBus in my code so I can manage how my navbar changes depending on the user that has logged in, if he’s admin the navbar will have more functions.

The fact is that when I log in, the login component emits something with an $emit, this event is recieved by another component, which is the navbar.

That works fine, if he’s logged in and he’s an admin, he’ll have more things to interact with in the navbar, but when I refresh the page is like the events desappear and the navbar works like there’s no one even logged in.

Thank you so much in advance!!!

Login.vue

I call these methods when an user logs in and is also an admin.

emitMethod () {
EventBus.$emit(‘logged-in’, ‘loggedin’)
},
adminMethod () {
EventBus.$emit(‘isadmin’, ‘isadmin’)
}

Navbar.vue

The navbar option ‘Users’

<li v-if=”auth==’loggedin’ && admin==’isadmin’” class=”nav-item”>
<router-link class=”nav-link” to=”/users”>Users</router-link>
</li>

This is the method login() that emits the event

login () {
axios.post(‘signin’, {
email: this.email,
password: this.password
}).then(res => {
localStorage.setItem(‘usertoken’, res.data.token)
const token = localStorage.usertoken
const decoded = jwtDecode(token)
this.admin = decoded.sub.isAdmin
console.log(‘Es admin? ‘ + this.admin)
this.email = ‘’
this.password = ‘’
//alert(‘Logueado correctamente’)
this.emitMethod()
if (this.admin === true) {
this.adminMethod()
}
router.push({ name: ‘Profile’ })

}).catch(err => {
this.password = ‘’
alert(‘Usuario o contrasea incorrectos’)
console.log(err)
})
},
emitMethod () {
EventBus.$emit(‘logged-in’, ‘loggedin’)
},
adminMethod () {
EventBus.$emit(‘isadmin’, ‘isadmin’)
}
}

And this the script section of the component Navbar.vue

export default {
data () {
return {
auth: ‘’,
user: ‘’,
admin: ‘’,
users: ‘’
}
},

methods: {
logout () {
localStorage.removeItem(‘usertoken’)
}
},

mounted () {
EventBus.$on(‘logged-in’, status => {
this.auth = status
})
EventBus.$on(‘isadmin’, status => {
this.admin = status
})
}
}

Solution :

When you refresh the page, all components will be reset and will start from the initial state again. You need to either detect that the user is logged-in in Login.vue.js initialization and emit the event OR pass some prop to the Navbar component that would inform is the user is logged in.

Solution 2:

Consider that you logged in and redirected to home admin page. In the code you write the function that only fire event in Login.vue.js guess on click login button. But after login process and redirecting to admin homepage when you refresh the page there is no $emit event (EventBus.$emit(‘logged-in’, ‘loggedin’)) in current page. And that is why the Navbar can not get if somebody is logged in or not.

You must check if user logged in every time when you refresh page and $emit logged-in event after this check. Then the program will work as you want

In this fiddle : https://jsfiddle.net/djsuperfive/svctngeb/ to reverse the structure array in data when I click the button.
Why are the rendered list and the dump of structure not reactive whereas the console.log reflect that the reverse was effective ?

The code :

HTML

<div id=”app”>

<draggable v-model=”structure”>
<div v-for=”(item, index) in structure” :style=”‘background-color:’+item.color”>
{ item.title }
</div>
</draggable>

<button type=”button” @click=”reverse()”>Reverse structure</button>

<hr>
<strong>dump structure:</strong>
<pre>
{ structure }
</pre>
</div>

JS:

new Vue({
el: ‘#app’,
data() {
return {
structure: [{
title: ‘Item A’,
color: ‘#ff0000’
},
{
title: ‘Item B’,
color: ‘#00ff00’
},
{
title: ‘Item C’,
color: ‘#0000ff’
},
],
}
},
methods: {
reverse() {
console.log(this.structure[0].title);
_.reverse(this.structure);
console.log(this.structure[0].title);
}
}
});

thanks

Solution :

Max!
Try to replace line:

_.reverse(this.structure);

with

this.structure.reverse();

I guess, Underscore.js does not have reverse method, because JavaScript has native one.
Everything should work fine with native JS Array reverse function.
Good luck!

Solution 2:

The problem here seems to be that vue.js does not detect that the array has changed: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

The solution is to either replace this.structure with a new array or to have a reverse function that uses Vue.set().

this.structure = _.clone(_.reverse(this.structure));

there is a setup where when sending messages from a vue-native client app (vue.js wrapper for react-native) with socket.io to a node.js server. From the node.js server Im forwarding my messages with OSC to “another program” which receives the OSC messages.

This works fine but now to go the other way around.

when successfully receiving the OSC messages in my node.js server from “the other application” using the code below but I cannot figure out how to forward this to my vue-native app.

VUE-NATIVE (the essential data):

<script>
import io from “socket.io-client”;

export default {
components: {
io
},

data: function() {
return {
object: {
oscAdress: “TheOscAdress”,
msg: “”
},
adress: “http://192.168.43.54:3000"
};
},

mounted() {
this.socket = io(this.adress);
console.log(“started”);
},

methods: {
sendMessage: function() {
this.socket.emit(“chat message”, this.object);
},

NODE.JS

const express = require(“express”);
const app = express();
const server = require(“http”).createServer(app);
const io = require(“socket.io”).listen(server);
const port = 3000;

// OSC
const { Client } = require(‘node-osc’);
this.client = new Client(‘127.0.0.1’, 3333);

const { Server } = require(‘node-osc/lib’);
var oscServer = new Server(10000, ‘127.0.0.1’);

// SOCKET IO
io.on(“connection”, socket => {
console.log(“a user connected :D”);

// RECEIVING FROM APP WITH SOCKET.IO
socket.on(“chat message”, msg => {
console.log(msg.msg);

// SENDING TO OSC
this.client.send(‘/‘+msg.oscAdress, parseInt(msg.msg, 10));
});
});

// RECEIVING FROM OSC
oscServer.on(‘message’, function (msg) {
console.log(msg);
});

server.listen(port, () => console.log(“server running on port:” + port));

Any ideas on how to forward the OSC messages to my app?

One approach would be to use this method in my node.js but I dont know how to receive it in vue.js so Im not sure if it works:

// RECEIVING FROM OSC
oscServer.on(‘message’, function (msg) {
console.log(msg);
// SENDING TO VUE-NATIVE??
io.emit(“chat message to app”, msg);
});

UPDATE
I receive the messages in vue.js with adding the receive function below in mounted
But it is not working correctly since something that is updating vue.js all the time. Not only at startup.

mounted() {
this.socket = io(this.adress);
console.log(“started”);

// receive message from server
this.socket.on(“chat message to app”, (data) => {
console.log( data);
})
},

At the moment my node.js app is constantly listening and OSC messages and is updated all the time. The same thing is it with vue-native application. Is it possible to only have it updating when it actually receives something or when some OSC value actually is changing?

Solution :

I almost solved my own question. See update above. The problem is though that Im using mounted function. something that is updating vue.js all the time. Not only at startup.

At the moment my node.js app is constantly listening and OSC messages and is updated all the time.Is it possible to only have it updating when it actually receives something or when some OSC value actually is changing?

there is to add extra rows forcing vue.js to recompute computed prop, specifically:

var foo = this.groups;
this.groups = {};
this.groups = foo;

as can be seen in this fiddle: https://jsfiddle.net/8bqv29dg/. Without these, available_groups is not updated.

Why is that and what is the clean way to have available_groups updating with groups?

Have tried adding groups to “deep-watched”, but it did not help.

Solution :

vue.js doesn’t track new elements added to an object:

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

One solution is to use Vue.set or reassign the object, like the example below:

new Vue({
el: “#app”,
data: {
groups: {1: {key: 1, label: ‘Those guys’},
},

computed: {
available_groups: function() {
return [{value: 0, label: ‘Anyone’}].concat(Object.values(this.groups));
},
},
methods: {
add_group: function(key, name) {
Vue.set(this.groups, key, {key: key, name: name})
},
}
})

Solution 2:

Use $set to add new property for data object:

methods: {
add_group: function(key, name) {
this.$set(this.groups, key, {key, name});
},
}

Here described vue.js reactivity

there is a Input with list which it’s searching in my data. everything is fine but to make it work like below:

when i search Hello, results are like this:

Examples: Hello there, Code with Hello, CodeWithHelloThere.

now last one is my problem, which my code to search in first letters not in middle of letters, i’m doing this for my homework so i’m not experienced at this.

<div class=”col-md-3”>

<div class=”item form-group”>
<label class=”control-label” for=”name”><span class=”required”>*</span>
</label>
<select v-model=”reagents” onchange=”this.dispatchEvent(new Event(‘change’))” class=”form-control reagent_selector” name=”reagents[]“ multiple=”multiple” id=””>
@foreach ($reagents as $item)
<option value=”{$item->id}”>{$item->name}</option>
@endforeach
</select>
</div>
</div>

Laravel Controller :

public function p_show()
{
$reagents=Reagent::all()->sortBy(“name”);
return view(‘panel.report.p_report’,compact([‘reagents’]));
}

Output is like this :

Image output

Update 1: i’m going to make things clear, i’m using vue.js which there’s not anything special in it, not any computed or watch or method to do my search. i’m getting data from controller and putting it in reagents:’’;. and using reagents in top v-model, which it’s a text-box and when u enter something it will show a list and the list is base on characters I’ve entered and received from data.

Update 2: Full codes

Full Codes for this file

Solution :

The filtering is being processed by Select2. You can set this function I’ve borrowed from the official documentation and modified in order to achieve the goal.

$(‘.reagent_selector’).select2({
width: ‘100%’,
matcher: function(params, data) {
if(params.term.trim() === ‘’)
return data;

if(typeof data.text === ‘undefined’)
return null;

if(data.text.toLowerCase().match(‘\\b’ + params.term.toLowerCase()))
return data;

return null;
}
});

I changed the search function to match only the options that contain at least one word starting with the input text.

The \\b up there is a regex anchor used to match “word boundary”. In this case, I’m forcing the input text to be at the beginning of a word, not in the middle.

I’m new to Vue, and more recently Vuex and trying to figure out how to mutate a specific post within the global state using vuex after an action has been committed.

Here is an example of the state.

// Array of posts

[
{
id: 1,
body: “This is an example post”,
comments: [
{ id: 1, body: “This is a comment” }
]
},
{
id: 2,
body: “This is an example post 2”,
comments: [
{ id: 1, body: “This is a comment 2” }
]
},
{
id: 3,
body: “This is an example post 3”,
comments: [
{ id: 1, body: “This is a comment 3” }
]
},
]

And here is the action I’ve designed to add a new comment. The comment is being successfully created in the database, but I’m stuck on finding a way to push the comment into the correct part of the state, as I’m trying to mutate a child property.

const actions = {
async new_post() {
…
},
async new_comment({ commit }, data) {
const response = await axios.post(
‘http://localhost:3000/api/posts/' + data.id + ‘/comments/new’, {
body: data.body
}
);
commit(‘new_comment’, {
res: response.data, // The object (comment) to push into a specific post
id: data.id, // The id of the post to push the comment into
})
}
}

const mutations = {
new_comment: (state, incoming) => {
state.posts.filter(post => post._id === incoming.id) // Is the post to update
console.log(incoming.res) // The object to update the post.comments with.
}
}

Any ideas?

Solution :

You can achive this using map.

Try this code.

state.posts = state.posts.map(function (post) {
if (post.id === incoming.id) {
return incoming
}
return item
})

Solution 2:

You could try changing the “Array of Objects” to and “Object of Objects” and giving every Object a key like this:

{
1: {
…..
},
2: {
…..
}
….
}

then you can add objects to them by calling them by their key which should be the same as the id.

vue.jstify Component Communication Problem (Props / Events - Parent Child Communication)

Hi, I try to pass data between parent and child like this tutorial:
https://www.youtube.com/watch?v=PPmg7ntQjzc

Regular HTML input works fine (just like in the tutorial).

But vuetify text field or text area don’t work.
(it seems fine at first. when I start type, it gives error)

What am I doing wrong?

// Child HTML

<input
type=”text”
placeholder=”regular child”
:value=”valueRegularChild”
@input=”inputRegularChild”
\>
<p>{ regularInputValue }</p>

<v-textarea
type=”text”
placeholder=”vuetify child”
:value=”valueVuetifyChild”
@input=”inputVuetifyChild”
\></v-textarea>
<p>{ vuetifyInputValue }</p>

// Child - methods

inputVuetifyChild($event) {
this.vuetifyInputValue = $event.target.value;
this.$emit(‘msgVuetify’, this.vuetifyInputValue);
},
inputRegularChild($event) {
this.regularInputValue = $event.target.value;
this.$emit(‘msgRegular’, this.regularInputValue);
},

// parent HTML

<child-component
:valueVuetifyChild=”insideParentVuetify”
:valueRegularChild=”insideParentRegular”
@msgVuetify=”insideParentVuetify = $event”
@msgRegular=”insideParentRegular = $event”
\>
<child-component>

everything same.

Regular works, Vuetify don’t

consol log error says:

TypeError: Cannot read property ‘value’ of undefined

thanks in advance

Solution :

I think v-model should work fine instead of :value but haven’t had time to test ist yet.

// Child HTML

<input
type=”text”
placeholder=”regular child”
v-model=”valueRegularChild”
@input=”inputRegularChild”
\>
<p>{ regularInputValue }</p>

<v-textarea
type=”text”
placeholder=”vuetify child”
v-model=”valueVuetifyChild”
@input=”inputVuetifyChild”
\></v-textarea>
<p>{ vuetifyInputValue }</p>

// Child - methods

inputVuetifyChild($event) {

this.$emit(‘msgVuetify’, this.vuetifyInputValue);
},
inputRegularChild($event) {

this.$emit(‘msgRegular’, this.regularInputValue);
},

// parent HTML

<child-component
:valueVuetifyChild=”insideParentVuetify”
:valueRegularChild=”insideParentRegular”
@msgVuetify=”insideParentVuetify = $event”
@msgRegular=”insideParentRegular = $event”
\>
<child-component>

I can kinda understand that a vuex instance(or store) is included in a vue.js instance as $store property.

However, where is it stored at?

Can I say it is stored on client memory with a vue.js instance?

What is its format? Can I say its format is “Javascript(or vue) object”?

And what can be its size limit?

It sound like there should be assumption to answer this(?), but it is bit hard to clarify it because there is not much data about this question like other data stores such as Cookie or Session.

Thank you!

Solution :

I thought the question was interesting and didn’t know the correct answer. After doing some research, it seem the term used in the Vuex documentation to describe where state is abstracted to is “a global singleton”. And the state is stored in memory, as you suggested.

Here is a definition of a singleton, derived from Techopedia:

“A singleton is a class that allows only a single instance of itself to be created and gives access to that created instance. It contains static variables that can accommodate unique and private instances of itself. It is used in scenarios when a user wants to restrict instantiation of a class to only one object. This is helpful usually when a single object is required to coordinate actions across a system.”

I also found this article helpful as the style was slightly more engaging: https://codeburst.io/javascript-global-variables-vs-singletons-d825fcab75f9

I don’t think there is a given size limit and so I assume the main constraint is the size of memory available (and practical constraints presented by the impacts on performance and maintainability as the state grows, of course).

There are also plugins available that will allow you to ensure that the Vuex state persists - after browser reloads, for example. I think they make use of the webStorage API (storing in localStorage or sessionStorage). Here is an example.

there is an application that I started in English from scratch. I had nightwatch tests and everything is working perfectly fine… but after adding 2 more languages, the main tests to run as they used to in English, then change the browser language (since that’s the criteria on which I choose the language) so I can run the other tests in German or French… etc. Is there a way to start a test suite by changing the browser’s language?

I looked into the documentation and found nothing in this area

Solution :

In order to set the language and run the tests locally, I did the following:

chrome: {
desiredCapabilities: {
chromeOptions: {
prefs: {
intl: { accept_languages: “ss-ZA” }
}, args: []
}
}
}

this allows you to run the tests locally, on only that language. or you can manage setting that locale code to a variable in a way and try setting it at the beginning of the test suite.

I did not get that far, because in my case, there is to run my tests headless because they will run later on a remote git server that runs only headless tests. According to this issue on Nightwatch’s github page, setting a browser language parameter for a headless test is not possible!

I use {} in Vue.js to render my data to HTML. But now I got a string in my data, and the tags in that string can be parsed into HTML tags when rendering data.

data(){
return {
bodyText: ‘aaaaaa<br>aaaaaa’
}
}

<p>{bodyText}</p>

the content in span tag is like :

aaaaaa
aaaaaa

But the result is :
aaaaaa<br>aaaaaa

Solution :

I think it should work using this:

<p>Using v-html directive: <span v-html=”rawHtml”></span></p>

Solution 2:

Use v-html directive:

<p><span v-html=”bodyText”></span></p>