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:"fakeemail@gmail.com"
    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.

Answer 1

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