javascriptfirebasevue.jsfirebase-realtime-databasehardcode

How can i hard code my data from realtime database?


So i have some data stored in a realtime datastore and only the admin can access the page where all the data is displayed, but how do i hard code the data to the website this is what i have and tried:

<!-- my html -->
<div v-for="(option, i) in reserveringen" :key="i">
  {{ reserveringen[i] }}
</div>
data: function(){
        return {
            lidnummer: '',
            reserveringen: []
        }
    },
mounted() {
  self = this

  const reserveringsref = firebase.database().ref('Reserveringen/')
  reserveringsref.once('value', function(snapshot){
            const lidnummer = ''
            const reserveringen = []

            snapshot.forEach(function(childSnapshot){
                const data = childSnapshot.val()

                self.lidnummer = data.Lidnummer

                reserveringen.push(
                    "<tr><td>" + data.Lidnummer + "</td></tr>"
                )
            });
            self.reserveringen = reserveringen; 
        });
    },

This will only display the array i made as text. Can anyone help me with this issue or am i completely doing this wrong any advice will be thanked!


Solution

  • Your isue is not with RT-db but with Vue i guess;

    If you want to build HTML in the JS section (as you do by pushing html tags inside an array), you should use the v-html directive instead of the interpolation.

    Something like that

    <div v-for="(option, i) in reserveringen" :key="i" v-html="reserveringen[i]">
    </div>