0

como están?, soy nuevo en Vue, y tengo el inconveniente que no puedo acceder a una propiedad de firebase desde el template, dejo un extracto del código, desde ya muy agradecido por su tiempo.

<template>
  <div id="app" class="container">
    <h1>Vue And FireBase</h1>
    <div class="card">
      <div class="card-header">
        <h3>Add A Link</h3>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="addLink" class="form-inline">
          <div class="form-group">
            <label for="">Title</label>
            <input v-model="newLink.title" class="form-control" type="text" placeholder="title">
          </div>
           <div class="form-group">
             <label for="">Author</label>
            <input v-model="newLink.author" class="form-control" type="text" placeholder="Author">
          </div>
           <div class="form-group">
             <label for="">Url</label>
            <input v-model="newLink.url" class="form-control" type="text" placeholder="Url">
          </div>
          <input type="submit" value="AddLink" class="btn btn-success">
        </form>
      </div>
    </div>
    <hr>
     <div class="card"> 
      <div class="card-header">
      <h3 class="card-title">Links List</h3>
      </div>
      <div class="card-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
              <th>User</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
           <tr v-for="link in links">
             <td><a v-bind:href="link.url">{{ link.title }}</a></td>

           </tr>
          </tbody>
        </table>
      </div>
     </div> 
  </div>
</template>

<script>
var config={
     ......
   }; 
   import fire from 'firebase';
   let app=fire.initializeApp(config);
   let db=app.database();

   let linksRef=db.ref('links'); 

export default {
  name: 'App',
   data(){
    return{
      newLink:{
      title:'',
      author:'',
      url:''
      },
    }
  },
  firebase: {
      links:linksRef
  },
  methods: {
    addLink:function(){
      linksRef.push(this.newLink);
    }introducir el código aquí
  }, 
}
</script> 

La consola del navegador me muestra este mensaje:

"[Vue warn]: Property or method "links" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."

Versión Vue: 3.8.2
Versión Node: 10.15.3
4
  • 1
    ¿En dónde defines links?
    – fredyfx
    el 20 jun. 2019 a las 23:36
  • Veo que estas agregando la llave firebase al objeto que exporta tu componente. Has instalado la libreria "vuefire"?. Puedes mostrarme el codigo de tu archivo donde instancias Vue.js (el archivo principal) el 21 jun. 2019 a las 3:05
  • Hola, gracias por vuestra respuesta, va el código del archivo main.js. import Vue from 'vue'; Vue.use('Vue'); import App from './App'; Vue.use('App'); import VueFire from 'vuefire'; Vue.use('VueFire'); Vue.config.productionTip = false; new Vue({ el: '#app', template: '<App/>', components: { App } }); el 22 jun. 2019 a las 8:26
  • @fredyfx hola, gracias por tu respuesta, te comento que links, lo he definido, en el main.js, y como no logré hacerlo funcionar, lo definí en el objeto data del archivo app.vue, y tampoco he conseguido resultados positivos. el 22 jun. 2019 a las 8:31

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.