Невозможно отобразить данные Firebase для отображения в простом приложении Vue - PullRequest
Новая
       39

Невозможно отобразить данные Firebase для отображения в простом приложении Vue

0 голосов
/ 01 мая 2020

Я очень новичок ie в Vue, и я посещаю курс, но когда я пытаюсь получить данные из Firebase, что-то идет не так, и в таблице нет данных.

Я пытался вставить данные между формой, и это работает, так что это означает, что соединение с БД также работает

Вот мой код:

Приложение. vue


<b-container>
  <div class="page-header">
    <h2 class="text-center">Ticket Manager</h2>
    <hr />
  </div>
  <b-row>

    <b-col lg="4">
      <b-form v-on:submit.prevent="onSubmit()">

        <b-form-group label="Titolo" label-for="titolo">
          <b-form-input type="text" id="titolo" name="titolo" v-model="newTicket.Titolo" v-on:change="onChange()" />
        </b-form-group>

        <b-form-group label="Descrizione" label-for="descrizione">
          <b-form-input type="text" id="descrizione" name="descrizione" v-model="newTicket.Descrizione" v-on:change="onChange()" />
        </b-form-group>

        <b-form-group label="Tipo" label-for="tipo">
          <b-form-select id="tipo" name="tipo" v-model="newTicket.Tipologia" :options="tipoTicket">
          </b-form-select>
        </b-form-group>


        <b-btn type="submit" variant="primary" :disabled="submitIsDisabled">Aggiungi</b-btn>

       </b-form>
       <br />

    </b-col>

    <b-col lg="8">
      <b-table striped hover :items="tickets" :fields="fields">
       <!--  <template v-slot:cell(Tipologia)="data"> {{getGameType(data.item.Tipologia)}}</template>
        <template v-slot:cell(Titolo)="data">{{getPiattaforma(data.item.Titolo)}}</template>
        <template v-slot:cell(Descrizione)="data">{{getPiattaforma(data.item.Descrizione)}}</template> -->
<!--           <template v-slot:cell(actions)="data">
          <b-btn size="sm" variant="warning">Canc</b-btn>&nbsp;
          <b-btn size="sm" variant="secondary">Mod</b-btn>
        </template> -->
      </b-table>
    </b-col>
  </b-row>
</b-container>

</template>

<script>
import { ticketsRef } from './firebase'
import { tipoTicketEnum } from './models/ticket'


export default {
firebase: {
  tickets : ticketsRef.orderByChild('Autore')
},
data(){

  return{
    tipoTicket: tipoTicketEnum.properties,
    fields: ['Autore', 'Tipologia', 'Titolo', 'Descrizione', 'actions'],
    tickets : []
    ,
     newTicket:{
       Autore: "",
       DataCreaz: "",
       Tipologia: tipoTicketEnum.Tecnico,
       Titolo: "",
       Descrizione : ""
     },
    submitIsDisabled : true
  }
},
methods:{
  getTipoTicket(value){
    return this.tipoTicket[value].text;
  },

  onSubmit(){
    ticketsRef.push(this.newTicket);
    this.newTicket.Titolo = '';
    this.newTicket.Descrizione = '';
    this.submitIsDisabled = true;
  },

  onChange(){
    this.submitIsDisabled = this.newTicket.Titolo === '' || this.newTicket.Descrizione === '';
  }
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

и это моя база данных. js


import Firebase from 'firebase/app'
import 'firebase/database'

const app = Firebase.initializeApp({
....
  })

  export const db = app.database()
  export const ticketsRef = db.ref('Tickets')

и main 

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './firebase'
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)


Vue.use(BootstrapVue)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

в консоли нет ошибок.

Заранее спасибо

...