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

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

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

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>

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>

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

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

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.

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

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