CODEWITHSUNDEEP
firebasevue.jscomponentsvuetify.js
Lucas Passos
Lucas Passos

Reputation: 35

Vue JS unable to properly show data table (v-for)

i'm trying to show a table of data that is coming from Firebase Firestore, i've already managed to put all data into a array, but when i try to show that content, the entire array shows up instead of the single items, see the image:

Names Table

And heres my code:

 <template>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Name
          </th>
          <th class="text-left">
            Calories
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
           v-for="(item, index) in result"
          v-bind:key="index"
          
        >
          <td>{{ result }}</td>
          
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
import firebase from 'firebase' 
import {db} from '../service/firebase'
  export default {
    data () {         
      return {
        userName: null,
        result: [],
        name: null,
        email: null,       
        userMail: null,
        telefone: null,
        userPhone: null,        
        userAccept: null,
      }
    },    
     async created() {    
      var userData = []
      await db.collection("users").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          console.log(`${doc.id} => ${doc.data()}`);
          userData.push(doc.data())          
    });    
});   
      this.result = userData.map(a => a.name)      
       console.log(result)          
    }    
  }      
    
</script>

How do i show a table of single items of the array instead of a table of arrays? Thank you in advance!

Upvotes: 0

Views: 115

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're printing the whole content using {{result}}, the right syntax is the following :

<tr  v-for="(item, index) in result" v-bind:key="index" >
  <td v-for="(record,i) in item" :key="i">{{ record }}</td>
</tr>

Upvotes: 1

Related Questions