[Vuejs]-JS if statement and basic write operations not working in Vue3/Vite composition API

I hope you have firebase.ts or firebase.js file in the root of the directory where you have setup the config to connect to firebase project that you have created on firebase console like explained here. if you have done that, then the only change that needs to be done in your code is the following,

you are not passing any values to your function for it to write the data. It does not know what is a userId, name, email, imageUrl etc..

you need to define the name, email as reactive variables

<script setup>
import { getDatabase, ref as dbref, set } from "firebase/database";
import { ref } from "vue";

const database = getDatabase();
const name = ref(name)
const email = ref(email)
const userId = 'testuserid'
const imageUrl = 'testurl'

function writeUserData(name, email) {
      const db = getDatabase();
      set(dbref(db, 'users/' + userId), {
        username: name.value,
        email: email.value,
      });
}
</script>

In the template, link the refs to the filed through v-model. basically you are binding the values of your reactive variables to the fields so that when you type values the values are updated.

<template>
<form action="#" v-on:submit.prevent="Submit">
    <v-container class="text-left"><h4>Account bearbeiten</h4>

                        <v-text-field v-model="name" label="Name" id="name" hide-details="auto" />

                        <v-text-field v-model="email" label="Email" id="email" hide-details="auto" />

    <v-btn flat density="compact" @click.prevent="writeUserData">Speichern</v-btn>
    </v-container>
</form>
</template>

Now you should be see the data getting updated, if you have properly configured firebase in your project.

This is what i came up with. Thanks. It renders the UID since i saw that was a quest. Declaring constructors in ref, reactive is impossible without setting ref as some other instancy, or ref as some other instancy in vue import.

<script setup>
import { getDatabase, ref as dbref, set } from "firebase/database";
import { getAuth } from "firebase/auth";
import { ref, reactive } from "vue";

    const auth = getAuth();
    const user = auth.currentUser;
    const userId = user.uid;
    const mail = user.email;
    const ident = user.name;
    alert(userId);
    const database = getDatabase();
    const name = ref(ident);
                const email = ref(mail);
    /* ----------------- */

function writeUserData(userId, name, email) {
  const db = getDatabase();
  set(dbref(db, 'users/' + userId), {
        username: name.value,
        email: email.value
  });
}
</script>

<template>
<form action="#" v-on:submit.prevent="writeUserData">
    <v-container class="text-left"><h4>Account bearbeiten</h4>

                        <v-text-field v-model="name" label="Name" id="name" hide-details="auto" />

                        <v-text-field v-model="email" label="Email" id="email" hide-details="auto" />

    <v-btn flat density="compact" @click.prevent="writeUserData">Speichern</v-btn>
    </v-container>
</form>
</template>

<style scoped lang="scss">
.v-container { max-width:500pt;  margin: 5px 0; }
</style>

It works now. But it still does not populate the server with data.

These are the rules i set:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Thx

<script setup>
import { getDatabase, ref as dbref, set } from "firebase/database";
import { getAuth } from "firebase/auth";
import { ref, reactive } from "vue";
import "firebase/database";

    const auth = getAuth();
    const user = auth.currentUser;
    const userId = user.uid;
    const mail = user.email;
    const ident = user.name;
    const database = getDatabase();
    const name = ref(ident);
    const email = ref(mail);

function writeUserData(e) {
  const db = getDatabase();
  set(dbref(db, 'users/' + userId), {
        username: name.value,
        email: email.value
  });
}
</script>

<template>
    <form action="#" v-on:submit.prevent="writeUserData">
        <v-container class="text-left"><h4>Account bearbeiten</h4>
    
            <v-text-field v-model="name" label="Name" id="name" hide-details="auto" />
            
            <v-text-field v-model="email" label="Email" id="email" hide-details="auto" />
    
        <v-btn flat density="compact" id="test" @click.prevent="writeUserData">Speichern</v-btn>
        </v-container>
    </form>
</template>

<style scoped lang="scss">
.v-container { max-width:500pt;  margin: 5px 0; }
</style>

It now works since i changed the function to (e). This seems inspired on simpler math, like image manipulation techniques in javascript, like simple things in code, that later looks more philosopher.

Thx, thanks.

It adds now the data.

Firebase documentation inspired data structure