Implement a getter function within a specific Firestore section using Vuefire

I am currently seeking a solution to set a property from getters to the firestore section using vue. I have implemented vuefire, but encountered the following error:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'getToUid' of undefined

Here is my code snippet:

    data: () => ({
      name:'',
    }),
    firestore: () => ({
        // eslint-disable-next-line no-undef
        usersList: db.collection(users),
        dmMessages: db.collection(direct_message).doc(this.getToUid).collection(message_collection_name)
      }),
    computed: {
        ...mapGetters({
          getToUid: "chats/GET_TO_UID",
        }),
    }

What would be the most optimal approach to include the getToUid in this line :

 dmMessages: db.collection(direct_message).doc(this.getToUid).collection(message_collection_name)
javascriptfirebasevue.jsgoogle-cloud-firestorevuefire

Answer №1

Make sure that your firestore method is not defined as an arrow function, as it won't be able to access the component instance using this. Update it to:

firestore() {
  return {
    usersList: db.collection(users),
    dmMessages: db.collection(direct_message).doc(this.getToUid).collection(message_collection_name)
  }
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Inertia.js with Laravel, a blank page is displayed on mobile devices

Recently, I've been working on a project using Laravel with React and Inertia.js. While everything runs smoothly on my computer and even when served on my network (192.168.x.x), I encountered an issue when trying to access the app on my mobile phone. ...

javascriptphpreactjslaravelnpm

Transferring a button value in JavaScript to a function for generating a localStorage variable

Managing a survey web app at my workplace requires me to gather data from customers. I am in the process of simplifying multiple functions (one for each option) into one seamless function. The "votes" are stored as localStorage variables, allowing the surv ...

javascripthtmllocal-storage

activating the button once all fields have been completed

Currently, I am utilizing knockout.js for data binding. There is a form with fields for name, number, email, etc. If any of these fields are left blank and the save button is clicked, the button becomes disabled as expected. However, if I later fill in th ...

javascriptjqueryknockout.js

Running a Node JS application concurrently with an Express API connected to MongoDB

Here's my current project plan: I've created a small Node app that fetches data about the stock market from an API and then stores the data in a Mongo DB (which is already up and running). My next step is to create an API that will allow other se ...

javascriptnode.jsmongodbexpressservice

Issue with the login functionality on Express.js/Node.js endpoint needs to be resolved

I have developed a basic CRUD application where users can register and login. The registration functionality in general.js is functioning properly, but I am facing an issue with the login process. Upon attempting to login, the response message received is: ...

javascriptnode.jsexpressroutes

Tips on extracting specific information from nested JSON objects

I have a packet with the following data and I need to extract a specific part: "data":"YOeNkAAg1wQAYjm/pg== Is there a way to achieve this using JavaScript in node-red? { "payload": "lora/01-01-01-01-01-01-01-01/39-31-37-33-5b-37-67-19/packet_sent { ...

javascriptjson

Looking to generate an HTML table using JavaScript?

Similar Question: Create HTML table from a Javascript array I have received an array that looks like this var univArray = new Array( {name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tui ...

javascripthtml

Show a collection of titles for unique post types

I am currently showcasing a custom list of post types using the following code: <!-- Displaying post type list --> <?php $args = array( 'post_type'=>'artworks_post', 'title_li'=> __(&apo ...

phpjavascriptjqueryajaxwordpress

Limit the option to check or uncheck all on the current page only

I am facing an issue with a select all checkbox that interacts with checkboxes in a paginated table. The problem arises when I check the select all box, as it selects all records instead of just those on the current page. For example, if there are 200 reco ...

javascriptjquery

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

htmlvue.jsvuex

Vue.js bootstrap-vue input number has a unique MaxLength feature that sets the

Is there a way to limit the input length for an input field from bootstrap-vue? I tried using maxLength, but it seems that it's not supported based on their documentation. If I remove type="number", the limitation works, but then it won't restric ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Is there a way to maintain data from a database when making another GET request with a different query string in React (Next.js)?

English isn't my first language, so please bear with me! Please review my code first: export default function DriveFolder() { const [clickFolderPk, setClickFolderPk] = useState(1); const viewFolder = async () => { const url = `/ ...

javascriptreactjsapinext.js

Can you explain the function of the "staticMoving" property in TrackballControls?

I was exploring the library module known as THREE.TrackballControls when I came across an interesting property within an instance of the module called staticMoving. This property appears to be connected to another property called dynamicDampingFactor. Howe ...

javascriptthree.jsuser-controlstrackball

Generate a unique Guid in ASP.NET MVC with the click of a button

When clicking a button, I want to generate a new GUID without reloading the entire view. However, I'm struggling to figure out how to achieve this. This is the function I currently have: Guid.NewGuid() I attempted to do this in JavaScript by adding ...

javascriptjqueryasp.netasp.net-mvcguid

How to remove elements from a JavaScript array: exploring the potential use of the delete function in JavaScript

I'm currently using Flot JS charts and I am attempting to completely remove a specific plot series from my data array either through jquery or plain javascript. Below is an example of what my data array consists of: [ { "label" : "Citrix PV Ether ...

javascriptjqueryflot

Deny access to the viewing feature for unauthorized users

Objective: To restrict access to the profile page only for logged-in users. The authentication is done through mongodb and passport-local. Existing Code: Below is the express route used to verify if the request is authenticated. app.get('/loggedin ...

javascriptangularjsexpressmean-stack

Leveraging $http or $timeout in conjunction with $stateProvider in AngularJS

I am seeking guidance on loading a template for a specific state in Angular using $http after coming across this question on Stack Overflow: Is it possible to load a template via AJAX request for UI-Router in Angular? The documentation for ui.router demon ...

javascriptangularjsajax

Issue with Confirming Password in Laravel Validation

I am currently incorporating Vue.js into my Laravel project and I am facing an issue with validating a confirmation password. Despite entering matching passwords, I continue to receive an error stating that they do not match. <div class="control-grou ...

laravelvue.jslaravel-validation

Upon invoking the useEffect function, the default value can be seamlessly established within the input field of the antd library

I have a function called loadProfile that I need to execute within the useEffect hook. When this function is triggered, I want the name Mario to be automatically displayed in the input field labeled name. How can I set this default value using the antd lib ...

javascriptreactjsantd

The jQuery onchange function does not have the ability to limit the input to only

When using the script to sum the input value, everything seems to be working fine. However, I am facing an issue where clicking up and down on the "input#total_selfmark" does not change the value. Additionally, when I manually type in a number, the "input# ...

javascriptjquerylaravelforeachsum