link959 link960 link961 link962 link963 link964 link965 link966 link967 link968 link969 link970 link971 link972 link973 link974 link975 link976 link977 link978 link979 link980 link981 link982 link983 link984 link985 link986 link987 link988 link989 link990 link991 link992 link993 link994 link995 link996 link997 link998 link999 link1000 link1001 link1002 link1003 link1004 link1005 link1006 link1007 link1008 link1009 link1010 link1011 link1012 link1013 link1014 link1015 link1016 link1017 link1018 link1019 link1020 link1021 link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095

[Vue.js] Firestore.settings() requires its first argument to be of type object but it was a custom object Subscribe to RSS

I can’t call the firebase.firestore().settings() function as I’m getting some “requires its first argument to be of type object” error:

firebase.firestore().settings({ timestampsInSnapshots: true })

I don’t understand this error, but as a workaround I tried to create an object thus:

const firestoreSettings = Object.create({ timestampsInSnapshots: true })
firebase.firestore().settings(firestoreSettings)

This didn’t work either.

Where does this error come from and how to solve it?

Solution :

you are confusing the namespaces; this should do the trick

import firebase from ‘firebase/app’
firebase.initializeApp(yourConfigHere)
const firestore = admin.firestore()
const settings = { timestampsInSnapshots: true }
firestore.settings(settings) // notice it is firestore instead of firestore()

PD: This is not required anymore… try updating the sdk version to the last one :)

[Vue.js] How do I highlight a table row on click in Vuejs? Subscribe to RSS

I would like to highlight a table row on ‘@click’ in Vuejs. Currently I’m having an issue getting this to work.

Here is my html template where I’m binding class active to the Boolean ‘isActive’.

<table
class=”paginatedTable-table hide-table”>
<thead class=”paginatedTable-table-head”>
<tr :class=”{active: isActive}” class=”paginatedTable-table-head-row”>
<th
v-for=”(column, key) in columns”
:key=”key”
:class=”column.align”
class=”paginatedTable-table-head-row-header”
@click=”sortTable(column)”>
{ column.label }
<i
v-if=”sortOptions.currentSortColumn === column.field”
:class=”sortOptions.sortAscending ? icons.up : icons.down”
class=”sort-icon” />
</th>
</tr>

I’m declaring the isActive in the data function and setting to false.

data() {
return {
width: ‘100%’,
‘marginLeft’: ‘20px’,
rowClicked: false,
filteredData: this.dataDetails,
isActive: false,

Function for button click where I’m setting isActive to true

async selectRow(detail) {
this.isActive = true;
this.width = ‘72%’;
this.rowClicked = true;

This part I’m not so sure about. Here I’m setting the Css in Sass.

tr:not(.filters):not(.pagination-row) {
background-color: $white;
&.active{
background-color: $lc_lightPeriwinkle;
}

Solution :

If I understand the question well,you want the tr clicked to be highlighted,by adding a class to it? If so,

Edited:
To iterate through a collection of users table for example and highlight a tr when clicked:

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for=”user in users” @click=”selectRow(user.id)” :key=”user.id” :class=”{‘highlight’: (user.id == selected user)}”>
<td>{ user.id }</td>
<td>{ user.name }</td>
<td>{ user.email }</td>
</tr>
</tbody>
</table>

Declare the data:

data(){
return {
users: [],
selected user: null
}
}

Inside the selectRow method;

selectRow(user){
this.selectedUser = user;
//Do other things
}

And then the class:

. highlight {
background-color: red;
}
tr:hover{
cursor: pointer;
}

[Vue.js] Why vue(v-on) does not finds my function? Subscribe to RSS

when completely new to vue.js (and JS), so please forgive me “stupid” questions.

In my Vue-Pet-Project there is got a self written class module Sudoku. In this to search for results with backtracking. Now vue.js recognized the click on the “startSearch” button, but tells me:

vue.esm.js?a026:628 [vue.js warn]: Error in v-on handler:
“ReferenceError: backtrack is not defined”

found in

-–>
warn @ vue.esm.js?a026:628 logError @ vue.esm.js?a026:1893 globalHandleError @ vue.esm.js?a026:1888
handleError @ vue.esm.js?a026:1848 invokeWithErrorHandling @
vue.esm.js?a026:1871 invoker @ vue.esm.js?a026:2188 original._wrapper
@ vue.esm.js?a026:7559 vue.esm.js?a026:1897 ReferenceError: backtrack
is not defined
at Sudoku.search (sudoku.js?9ece:4)
at VueComponent.startSearchSolutions (App.vue?9c43:74)
at click (App.vue?88bf:69)
at invokeWithErrorHandling (vue.esm.js?a026:1863)
at HTMLButtonElement.invoker (vue.esm.js?a026:2188)
at HTMLButtonElement.original._wrapper (vue.esm.js?a026:7559)

though this function is declared. Here the code of my class:

module.exports.Sudoku = class Sudoku
{
[…]

search()
{
console.log(“search started”)
let results = []

backtrack(this.myNumbers,0,0,results)

return results
}

backtrack(testNumbers,x,y,results)
{
console.log(“start backtrack”)

//TODO: yet much to do…

if(x===9 && y===9)
{
results.push([…testNumbers])
console.log(“result added”)
}
}
}

What have I done wrong?

Thanks for help!

Solution :

use this.backtrack instant of just backtrack for reference backtrack method.

module.exports.Sudoku = class Sudoku
{
[…]

search()
{
console.log(“search started”)
let results = []

//use this for reference backtrack method. Heir this is the Sudoku class itself
this.backtrack(this.myNumbers,0,0,results)

return results
}

backtrack(testNumbers,x,y,results)
{
console.log(“start backtrack”)

//TODO: yet much to do…

if(x===9 && y===9)
{
results.push([…testNumbers])
console.log(“result added”)
}
}
}

[Vue.js] How to pass static + dynamic value to href= Subscribe to RSS

I need to pass the link to href in the format of “www.google.com/1234" to the below code.1234 is dynamic number

<a :href=”” v-if=”paramConfigMap[param].returnHTML” class=”btn equity buy”>Buy Fundaaaas</a>

Solution :

In Vue.js you can bind the value. For example:

<template>
<a :href=”‘https://example.com/' + link”>
</template>

<script>
export default {
data: {
link: ‘546’
}
}
</script>

Solution 2:

<template>
<div>
<a :href=”‘https://example.com/' + link” v-if=”paramConfigMap[param].returnHTML” class=”btn equity buy”>Link</a>
</div>
</template>

<script>
export default {
data() {
return {
link:’user’
}
},
}
</script>

[Vue.js] Hiding a dropdown in Vuejs by clicking outside (component) Subscribe to RSS

I’m creating a menu component on a Vuejs project. This menu has 2 dropdowns, I already created some methods and used vue.js directives so when I click in 1 of them, the other hides and vice versa, I’d also like to know how to hide them by clicking outside.

I’ve tried 2 vue.js libs but didn’t work for me. Also, I’d like to do this manually if possible and not externally.

HTML:

<!– menu –>
<div>
<ul>
<li><span>Home</span></li>
<li v-on:click=”toggle1(), dropAreas =! dropAreas”>
<span>Areas</span>
</li>
<li v-on:click=”toggle2(), dropAdmin =! dropAdmin”>
<span>Administration</span>
</li>
</ul>
</div>
<!– /menu –>
<!– dropdowns–>
<div v-if=”dropAreas”>
<ul>
<li>
<span>Kitchen</span>
</li>
<li>
<span>Baths</span>
</li>
</ul>
</div>
<div v-if=”dropAdmin”>
<ul>
<li>
<span>Profile</span>
</li>
<li>
<span>Services</span>
</li>
</ul>
</div>
<!– /dropdowns–>

JS

data () {
return {
dropAreas: false,
dropAdmin: false
}
},
methods: {
toggle1 () {
if (this.dropAdmin === true) {
this.dropAdmin = false
}
},
toggle2 () {
if (this.dropAreas === true) {
this.dropAreas = false
}
}
}

*This code is being called in another component, “Home”, like this:

<template>
<div>
<menu></menu>
<!– […] –>
</div>
</template>

Any ideas on how to do it manually? Is it possible? Thank you.

Solution :

It’s a bit of a hack, but you can do it using tabindex HTML attribute and :focus CSS pseudo-class:

new Vue({

el: ‘#app’,
template: `
<div class=”container”>
<div
ref=”menu”
id=”menu”
tabindex=”0”
\>Menu</div>
<ul id=”dropdown”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
`

});

#menu {
display: inline-block;
padding: 1em;
border: 1px solid #e6e6e6;
cursor: pointer;
}

#dropdown {
display: none;
}

#menu:focus + #dropdown {
display: block;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id=”app”></div>

[Vue.js] vue-js. watch doesn't work when data is changed Subscribe to RSS

I’m new to vue.js. But there is trouble with data binding and re-rendering. Combining socket-io and vue-chartjsm I’ve faced the issue about rendering.

I intended to change data via generateData(), which seemed to be working. And I expected to watch: would work but it didn’t.

I think I misunderstand some concepts. Could you please let me know what’s wrong with my idea?

App.vue

(…)
export default {
name: “App”,
components: {
ReactiveBarChart
},
data() {
return {
chartData: null,
originalData: null
};
},
watch: {
originalData: function(data) {
console.log(data)
// not triggered after generateData() is called
}
},
methods: {
generateData() {
let changeArray = [];
changeArray = this.originalData;
changeArray[0] = 20;
this.originalData = changeArray;
console.log(“data :”, this.originalData)
// logged properly with [20, …..]
},
(…)

Solution :

Try to declare originalData as an empty array and to push() the values to the empty array. the code could look something like:

export default {
data() {
return {
chartData: null,
originalData: []
};
},
watch: {
originalData: function(data) {
console.log(data)
}
},
methods: {
generateData() {
let changeArray = [];
changeArray = this.originalData;
changeArray.push(20);
this.originalData = changeArray;
console.log(“data :”, this.originalData)
}
}
}

If you expecifically want to change the array value on the first position use splice(0,1,20) instead of push(20)

You can read more helpful information about Array Methods

[Vue.js] Vue-Multiselect and Vuex Having a value from store pre-selected Subscribe to RSS

imagine a Vuejs-Application with Vuex. to have a mulitselect-dropdown. Basic example in the Vue-component:

<template>
<div>
<multiselect
v-model=”values”
:options=”options”>
</multiselect>
</div>
</template>

<script>
import Multiselect from ‘vue-multiselect’
export default {
components: { Multiselect },
data () {
return {
values: null,
options: [‘bar’, ‘foo’, ‘hello’,’test’]
}
}
}
</script>

<style src=”vue-multiselect/dist/vue-multiselect.min.css”></style>

Now, if I initialize “values” in data like this:

values: [“test”]

The multiselect-dropdown has “test” as already selected option. I can also deselect it on click and select it again, since it is in options.

If I try to initialize my values like this:

values:[this.$store.state.variableIwantPreselected]

it does not fully work. In the selection-area/dropdown search field, those green boxes with the selected item’s name are normally displayed. For me, it does not display the string in the green box, which is in this.$store.state.variableIwantPreselected, but only a small green box with nothing written in it.

I think I missed something about Vuex and lifecycle hooks, but I could not figure out what.

Solution :

If you working with Vuex the best way to manipulate data in storage use state,
mutations, actions and getters to get any type of data. For more information check this post

Solution 2:

A further note for people running into similar problems: check, when the component is rendered/loaded. In my case, it was loaded before the value in the store was changed (tends to happen when you use vue-router and have several components displaying with only one route).

Solution: take a deeper look into the updated lifecycle hook.

I now call a function in the updated lifecycle hook. The function is declared in methods. The function checks, if my values (now initialized as empty list) has a length of 0. If so, the store value is pushed to the list.

in data:

values: []

in methods:

checkValues (){
if(this.values.length === 0){
this.values.push(this.$store.state.variableIwantPreselected)
}
}

in updated():

this.checkValues()

[Vue.js] Error in v-on handler Error Reference.set failed First argument contains undefined Subscribe to RSS

Where could The blow error be occurring? there is been staring at this for awhile and cannot figure it out. there is tried to console log, all of the data that is being imputed into the database and they all have values…

when trying to push the current message to the database in order to create a real time chat app. Provided below is the code.

This project is using firebase and VueJs.

CreateMessage.vue.js (where I believe the error is)

<template>
<div class=”container” style=”margin-bottom: 30px”>
<form>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Enter message …” v-model=”newMessage”>
<p class=”text-danger” v-if=”errorText”>{ errorText }</p>
</div>

<button class=”btn btn-primary” type=”submit” @click.stop.prevent=”createMessage”> Submit</button>
</form>
</div>
</template>

<script>
import firebase from ‘../components/firebaseconfig’;
import AuthMonitor from ‘../AuthMonitor’;
import Login from ‘../components/Login’;

export default {
name: ‘CreateMessage’,
mixins:[AuthMonitor],
data(){
return {
newMessage: “”,
errorText: “”,
user: firebase.auth().currentUser
}
},
methods: {
createMessage () {
console.log(this.newMessage);
if (this.newMessage != ‘’) {
console.log(Date.now());
firebase.database().ref(“messages”).push().set({
message: this.newMessage,
name: this.user,
timestamp: Date.now()
}).catch(err => {
console.log(err);
});
this.newMessage = “”;
this.errorText = “”;
} else {
this.errorText = “A message must be entered!”
}
}
}
}
</script>

ChatRoom.vue.js . (the view)

<template>
<div class=”chat container” v-if=”isAuth”>
<h2 class=”text-primary text-center”>Real-Time Chat</h2>
<h5 class=”text-secondary text-center”>Powered by Vue.js & Firebase</h5>
<div class=”card”>
<div class=”card-body”>
<p class=”nomessages text-secondary” v-if=”messages.length == 0”>
[No messages yet!]
</p>
<div class=”messages” v-chat-scroll=”{always: false, smooth: true}”>
<div v-for=”message in messages” :key=”message.id”>
<span class=”text-info”>[{ message.name }]: </span>
<span>{message.message}</span>
<span class=”text-secondary time”>{message.timestamp}</span>
</div>
</div>
</div>
<div class=”card-action”>
<CreateMessage/>
</div>
</div>
</div>
</template>

<script>
import CreateMessage from ‘@/components/CreateMessage’;
import firebase from ‘../components/firebaseconfig’;
import AuthMonitor from ‘../AuthMonitor’;
import moment from ‘moment’;

export default {
name: ‘Chat’,
mixins:[AuthMonitor],
components: {
CreateMessage
},
data() {
return{
messages: []
}
},
// created() {
// let ref = firebase.database().ref(‘messages’);

// ref.onSnapshot(snapshot => {
// snapshot.docChanges().forEach(change => {
// if (change.type == ‘added’) {
// let doc = change.doc;
// this.messages.push({
// id: doc.id,
// name: doc.data().name,
// message: doc.data().message,
// timestamp: moment(doc.data().timestamp).format(‘LTS’)
// });
// }
// });
// });
// }
}
</script>

<style>
.chat h2{
font-size: 2.6em;
margin-bottom: 0px;
}

.chat h5{
margin-top: 0px;
margin-bottom: 40px;
}

.chat span{
font-size: 1.2em;
}

.chat .time{
display: block;
font-size: 0.7em;
}

.messages{
max-height: 300px;
overflow: auto;
}
</style>

Solution :

The error message is telling you that this.user contains a property ja which contains an undefined value. You can’t put undefined values into Realtime Database.

[Vue.js] How to define a slot in a Vue.js template when using render function? Subscribe to RSS

When defining a slot in a Vue.js component template using regular old HTML, it’s as simple as this:

<div>
<h1>Hello, when a template!</h1>
<slot name=”my_slot”></slot>
</div>

And it can be activated like so when using the template in the page:

<my-template>
<template slot=”my_slot”>
<p>Slot content.</p>
</template>
</my-template>

Which should output something like:

<div>
<h1>Hello, when a template!</h1>
<p>Slot content.</p>
</div>

However, my situation requires that I define my component template using the render function which means the template DOM needs to be set up using nested calls to the createElement function. So my original template definition would now look something like this:

h(‘div’, {}, [
h(‘h1’, {
domProps:{
innerHTML: “Hello, when a template!”
}
}, []),
h(‘slot’, {
attrs:{
name: “my_slot”
}
}, [])
])

However this doesn’t work for me. I’m assuming it’s because ‘slot’ isn’t a valid html tag but I can’t seem to find any clear answer on this specific subject. How can I correctly define slots in a Vue.js component template when using the render function?

Solution :

From the documentation

h(‘div’, {}, [
h(‘h1’, {
domProps:{
innerHTML: “Hello, when a template!”
}
}, []),
this.$slots.my_slot
])

[Vue.js] How do I initialize a default data value to the returned value of a callback function? Subscribe to RSS

when running into an issue being able to initialize a value on App.vue.js to the result of a function when that function is async. I also tried setting it to the resolution of a promise but that didn’t seem to work either. In the former case I just get an undefined value, and in the second I just get the ref type for a js promise. What is the proper way in vue.js to initialize a variable to the result of a callback that will complete at a later time?

Solution :

I prefer to do this in the created lifecycle hook. Once the async action is complete, the result is stored in the data prop.

new Vue({
el: “#app”,
data: {
asyncData: null
},
created() {
const url = ‘https://jsonplaceholder.typicode.com/posts/1';
axios.get(url).then(response => {
this.asyncData = response.data;
});
}
})

Template:

<div id=”app”>
{ asyncData }
</div>

Here is a fiddle