Save data using firebase with a customizable and dynamic key title

I am currently working on adding the user's selected month to my database.

saveInBdd (){
  this.errors = [];

  const user = firebase.auth().currentUser;
  user.updateProfile({
    displayName: this.firstname,
  }).then(()=>{
    this.saveUserToUsersRef(user)
  }, error => {
    this.errors.push(error.message)
  })
},
saveUserToUsersRef(user){
  return this.usersRef.child(user.uid).update({
    tab1: { this.months[0].selectedOption : "test"}
  })
},

This piece of code is throwing an error message:

https://i.sstatic.net/SskwI.png

Answer №1

In the JSON object notation that you are employing, it is important for the property name to be a literal. If you want to use a variable as the name of a property, you should utilize the [] notation:

storeUserInUsersRef(user){
  var updates = {};
  updates[this.months[0].selectedOption] = "test";
  return this.usersRef.child(user.uid).update(updates))
},

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

Change the order of numbering in ordered lists

I am seeking a way to change the ordering of an ordered list to be in descending order. You can view a live example here. Instead of having the counter span multiple ol elements, I would like the counter to reset after each ol. For the live demo, the des ...

AngularJS textbox failing to recognize line breaks as expected

I am struggling with the following HTML code: <div class="form-group"> <div class="input-group col-sm-12"> <label for="" class="control-label">Comments</label> ...

Is there a tool available on the command line to detect simple Javascript syntax mistakes?

Is there a command-line tool in Linux that can identify basic syntax errors and compile time errors in JavaScript files intended for web browsers? Usually, I write my JavaScript code alongside server-side languages like Ruby or Perl. It would be beneficia ...

Setting up a specific print media query for the body element through JavaScript

I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...

Exploring intricate toggle capabilities

Hello everyone, I am completely new to Jquery and recently stumbled upon this code snippet. It's an accordion that utilizes localstorage. $(function () { var initialCollapse = localStorage.collapse; if (initialCollapse) initialCollapse = in ...

What is the best way to transfer data from processing.js to a rails application?

I am working on a basic canvas project using processing.js, and I am wondering how I can transfer data from my Rails application to Processing.js. void drawBox(int bx, int by, int bs, int bs){ strokeWeight(3); stroke(50,50,50); // Test ...

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Check out the new NEXTUI navbar I'm using: I am having trouble setting the isActive property on the active link in my NavBar component in Next.js. I couldn't find much help on Google, so I'm hoping someone here has experience with this or k ...

What are some ways to implement pagination on a website?

Struggling to implement pagination without Laravel? You're not alone. The challenge lies in creating a cycle that displays the correct number of pages, with each page containing 10 posts out of a total of 98. While you've managed to calculate the ...

The Vue component should trigger the display of data in a Bootstrap modal based on the row of the button that was

Here is a sample code snippet demonstrating how data is fetched from the database: <table class="table table-bordered"> <thead> <tr><th>User ID</th><th>Account Number</th><th>Accou ...

Display radio options when clicked upon

I am in the process of creating a set of radio buttons that will be utilized for capturing values to generate a subscription/modal checkout. My current situation involves having the radio button options visible. However, I aim to achieve a functionality wh ...

Having difficulty locating any content within the return element in JSX

I'm relatively new to React and JSX and currently working on creating a button that, when clicked, should trigger a dialog box to appear. Within this dialog box, there should be a table with three columns: name, status, and exception error, all repres ...

Customizing Sphere Hues Individually in three.js

Within my scene, a unique arrangement of 7 spheres creates a flower petal formation. The setup includes 6 spheres around the perimeter and one sphere at the center. I aimed to randomize the color of each sphere individually. Below is the code snippet utili ...

Issue with Vue.js: @input directive not functioning properly in conjunction with v-for directive

I've been working on developing my own custom <input> Vue component. I've implemented a feature that prevents users from inputting the wrong type of data by using regex.test() for each input field. Below is the code snippet for my Vue comp ...

v-for loop to populate dropdown menu with identical values

Recently, I started working on a points counter app using Vue.js and encountered some issues with the v-for loop and dropdown menu functionality. Within my Vue.js application, I have an array of players as shown below: var app = new Vue({ el: '#l ...

React App stalled due to continuously running function

In this section of my React app, the createBubbles function is functioning properly. However, I am encountering an issue where the entire app freezes when navigating to another page after visiting this one. The console displays the following errors and de ...

URL page failed to load on Vue router

Currently, I am utilizing Vue version 2.5.2 to develop a single-page application. Here is an example of my route configuration using vue-router version 3.0.1: routes: [ { path: '/', name: 'Home', component: Home ...

What is the best way to determine the width of a scroll bar?

Are you familiar with any techniques that work across multiple browsers? ...

Conceal THREE.Mesh using dat.gui controls

I'm exploring the process of creating 3D shapes for 3 buildings, starting with the outlines (with X and Y values for each line start/end) and then extruding them. Despite my search on Google yielding no helpful results, I'm reaching out to you f ...

Error encountered when trying to access JSON data using jQuery due to a formatting issue

I encountered an issue with accessing and storing the contents of a JSON file into an array. Despite everything seeming to function correctly, I am receiving an error in the console when using Firefox. Not Well Formed. The error points to my JSON file. H ...