Values falsely listed without computing them from Firebase, but how to do?

Question

i want to filter people, based on their gender. I have written that into Firebase Realtime Database under users/UID/gender/ and then the gender to true that is chosen in the Profile by the user. If i render by v-if="item.groups == ladies" Vue changes always that to false automatically.

It seems the same problem underlieing.

It all just crashes Vue all the time. It sucks. Atleast i can render the users by showing their name, but the other things just make seem the page crash. I need to use Pinia if time comes, because it enables to treat all items at once so i need to find that out on my own, else i can't shuffle the items as an effect all at once.

Have a very nice day

If i use

<script setup>
import { getDatabase, ref as dbref, set, child, get, push } from "firebase/database";
import { getAuth } from "firebase/auth";
import { ref, reactive, watch } from "vue";
import "firebase/database";
import { useCounterStore } from '@/stores/login'

const store = useCounterStore()
    const database = getDatabase();
    const dbRef = dbref(getDatabase());;
    const data5 = ref([{ value: '' }]);
    const data6 = ref([{ value: '' }]);
    get(child(dbRef, '/users/')).then((snapshot) => {
      snapshot.forEach((userSnapshot) => {
        data5.value = snapshot.val();
        data6.value = userSnapshot.child("avatar").child("userimage").val()
      })  
    });
    const userimage2 = data6

</script>

<template>
    <div v-if="store.count > 0" class="title ladies"><h4>{{ $t('message.allusers') }}</h4><br/>
        <div>
            <v-row align="right" no-gutters class="galery">
                <TransitionGroup tag="article" name="fade">
                    <v-col class="--Surface-Variant profile-mini" v-for="(item, index) in data5">
                            <v-sheet class="pa-2 ma-2">
                                <p>
                                    <div>
                                        <v-img
                                          :width="100"
                                          aspect-ratio="16/9"
                                          cover
                                          :src='userimage2'
                                        ></v-img>
                                    </div>
                                    <h4>{{ item.username }}</h4>
                                </p>
                            </v-sheet>
                    </v-col>
                </TransitionGroup>
            </v-row>
        </div>
    </div>
</template>

<script>
  export default {
    data: () => ({
      alignments: [
        'start',
        'center',
        'end',
      ],
    }),
  }
</script>

all is alright, except that userSnapshot does only deliver one image repeating itself always. The moment i used item.avatar.userimage in the v-img :src, it crashes Vue again.

If i use computed, it works with :src, but that does not seem right:

    get(child(dbRef, '/users/')).then((snapshot) => {
      snapshot.forEach((userSnapshot) => {
        data5.value = snapshot.val();
        data5.value2 = userSnapshot.child("avatar").child("userimage").val()
                const evenNumbers = computed(() => {
          return data5.value2;
        })
      })  
    });

Goodbye.

Answer 1

The problem was in not using ref(0) as a constructor. I fixed the problem by using following source:

<script setup>
import { getDatabase, ref as dbref, set, child, get, push } from "firebase/database";
import { getAuth } from "firebase/auth";
import { ref, reactive, watch, computed, onMounted } from "vue";
import "firebase/database";
import { useCounterStore } from '@/stores/login'

const store = useCounterStore()
    const database = getDatabase();
    const dbRef = dbref(getDatabase());
    
    const data1 = ref(0)

    get(child(dbRef, '/users/')).then((snapshot) => {
      snapshot.forEach((userSnapshot) => {
        data1.value = snapshot.val();
      })  
    });
</script>
<template>
                <TransitionGroup tag="article" name="fade">
                <v-col v-for="(item, index) in data1" class="--Surface-Variant profile-mini">
                <v-div :key="item" v-if="item.groups.ladies" class="pa-2 ma-2">
                            <p>
                                <div>
                                    <v-img :height="185" :width="200" aspect-ratio="16/9" cover :key="item" :src="item.avatar.userimage"/>
                                </div>
                                <h4>{{ item.username }}</h4>

                            </p>
                </v-div></v-col>
                </TransitionGroup>
</template>

<script>
  export default {
    data: () => ({
      alignments: [
        'start',
        'center',
        'end',
      ],
    }),
  }
</script>

I still get stripes due to the two distinct genders at each end of array. I don't know how to get rid of that right now, and i still struggle creating visible user profiles for all, and also in case of nonregistered users, how to display the userbase to them.

Goodbye.

This is an interesting topic further on constructors: How to get distinct values from an array of objects in JavaScript?.

The components divided into gender, seem, to inherit the old styles. Thx.