Unable to display data from Firebase Database using Vue.js

Question

I have connected my Vue app to my Firebase Database and am able to see the resulting JSON in my Vue Dev Tools when I inspect the page on my localhost, for example:

users:Array[10]
  0:Object
    .key:"99"
    City:"Richmond"
    Date of Birth:"9/16"
    Email:"[email protected]"
    Gender:"F"
    Home Phone:""
    Ministry:"Campus"
    Name:"Doe, Jane"
    State:"VA"
  1:Object
  2:Object
  3:Object
etc.

In my App.vue file, I have the following code to output the data:

...
<tbody>
  <tr v-for="user in users">
    <td>{{ user.name }}</td>
    <td>{{ user.city }}</td>
    <td>{{ user.state }}</td>
  </tr>
</tbody>
...

This outputs a table with the correct number of rows (10), but each table cell is blank. None of the data is printed. I'm guessing my references to the table using user.name, user.city, and user.state are not correct? Can you see if I'm doing something wrong? Thanks!

P.S. I have set the Rules to allow anyone to read/write to this database so I don't think permissions are the issue.

budgw · Accepted Answer · 2017-09-13 07:55:34Z

1

Have you tried with {{ user.Name }} instead of {{ user.name }] ?

answered Sep 13, 2017 at 7:55

budgw

7101 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Landon Over a year ago

Thanks! You were right, it's displaying now. I thought I had tried that at an earlier point, but there must have been another issue with my code that prevented it from working then.

Collectives™ on Stack Overflow

Unable to display data from Firebase Database using Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related