link1781 link1782 link1783 link1784 link1785 link1786 link1787 link1788 link1789 link1790 link1791 link1792 link1793 link1794 link1795 link1796 link1797 link1798 link1799 link1800 link1801 link1802 link1803 link1804 link1805 link1806 link1807 link1808 link1809 link1810 link1811 link1812 link1813 link1814 link1815 link1816 link1817 link1818 link1819 link1820 link1821 link1822 link1823 link1824 link1825 link1826 link1827 link1828 link1829 link1830 link1831 link1832 link1833 link1834 link1835 link1836 link1837 link1838 link1839 link1840 link1841 link1842 link1843 link1844 link1845 link1846 link1847 link1848 link1849 link1850 link1851 link1852 link1853 link1854 link1855 link1856 link1857 link1858 link1859 link1860 link1861 link1862 link1863 link1864 link1865 link1866 link1867 link1868 link1869 link1870 link1871 link1872 link1873 link1874 link1875 link1876 link1877 link1878 link1879 link1880 link1881 link1882 link1883 link1884 link1885 link1886 link1887 link1888 link1889 link1890 link1891 link1892 link1893 link1894 link1895 link1896 link1897 link1898 link1899 link1900 link1901 link1902 link1903 link1904 link1905 link1906 link1907 link1908 link1909 link1910 link1911 link1912 link1913 link1914 link1915 link1916 link1917

[Vue.js] Problems with refreshing page and event handling ($emit and $on)

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

[Vue.js] VueJS reverse data array has no effect

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

[Vue.js] Receiving messages from node server with socket.io to vue-native / react-native client

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?

[Vue.js] Vue not updating computed unless forced to

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

[Vue.js] How to Search in starting letters in text box?

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.

[Vue.js] How to push to a specific array item in the vuex state

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.js] VUETIFY Problem With Component Communication (Props / Events - Parent Child Communication)Vuetify Component Communication Problem (Props / Events - Parent Child Communication)

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>

[Vue.js] Where is a vuex(vue) instance stored at? in what format? and how is the size limit of it?

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.

[Vue.js] Test VueJs localization using Nightwatch

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!

[Vue.js] How to parse <br> in a string to html tag in VUE.js

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>