Question

我正在设置一个Vue.js项目，并将其连接到Firebase以获得实时数据库。

问题：我可以将数据保存到Firebase数据库中，但是无法将其呈现到视图中。

错误消息：

[Vue警告]：在实例上未定义属性或方法“名称” 但在渲染过程中被引用。

我试图通过将vue实例的“名称”属性添加到数据函数中来代替它，而不是在实例中将其设置为单独的属性，但这是行不通的。

<div id="app">

    <label for="">Name</label>
    <input type="text" name="" id="" v-model="name">
    <button @click="submitName()">Submit</button>


    <div>
        <ul>
            <li v-for="personName of names"
            v-bind:key="personName['.key']">
            {{personName.name}}
            </li>
        </ul>
    </div>

  </div>

<script>

import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  firebase: {
    names: namesRef
  },
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

<style>

预期结果：保存到Firebase的数据呈现在视图上

实际结果：

[Vue警告]：在实例上未定义属性或方法“名称” 但在渲染期间引用。确保此属性是在data选项中或对于基于类的组件，通过初始化属性。

Answer 1

尝试一下。您需要返回数据中的对象

<script>

import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
      firebase: {
       names: namesRef
      },
    }
  },

  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

<style>

Answer 2

本质上，您的attribute实例中的Vue错误。.您需要将firebase移到data中。

（[CodePen]）

我无法在Stack Snippet中使用它。.

~~~修复~~~~

VUE / JS

firebase.initializeApp({
  databaseURL: "https://UR-DATABASE.firebaseio.com",
  projectId: "UR-DATABASE"
});

const database = firebase.database().ref("/users");

const vm = new Vue({
  el: "#app",
  data: {
    firebase: {
      names: []
    },
    name: "SomeName"
  },
  methods: {
    getFirebaseUsers() {
      this.firebase.names = [];
      database.once("value", users => {
        users.forEach(user => {
          this.firebase.names.push({
            name: user.child("name").val(),
            id: user.child("id").val()
          });
        });
      });
    },
    handleNameAdd() {
      let id = this.generateId();
      database.push({
        name: this.name,
        id: id
      });
      this.name = "";
      this.getFirebaseUsers();
    },
    generateId() {
      let dt = new Date().getTime();
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
        let r = ((dt + Math.random() * 16) % 16) | 0;
        dt = Math.floor(dt / 16);
        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
      });
    }
  },
  mounted() {
    this.getFirebaseUsers();
  }
});

HTML

  <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase.js"> . 
  </script>

  <div id="app">

    <label for="">Name</label>
    <input type="text" name="" id="" v-model="name">
    <button @click="handleNameAdd">Submit</button>


    <div>
        <ul>
            <li v-for="(person, index) in firebase.names"
            v-bind:key="person.id">
            {{person.name}} | {{person.id}}
            </li>
        </ul>
    </div>

  </div>

旧答案： 这是data内部的样子：

...
data() {
  firebase: {
    names: [],
  }
}
...

因此，您的v-for中的数据将通过firebase.names进行引用，例如：

...
<li v-for="(personName, index) in firebase.names"
  :key="index">         // <<-- INDEX IS NOT THE BEST WAY TO STORE KEYS BUT ITS BETTER THAN NOTHING 
  //:key="personName.id // <<-- YOU COULD ALSO DO SOMETHING LIKE THAT, IF YOU HAVE A UNIQUE ID PER PERSON
  {{personName.name}}
</li>
...

最佳修复程序：

如果您希望每次用户添加新名称时自动从Firebase中保存/检索数据，则可以使用computed属性（如CodePen和代码段中所述。）。

问题：

<script>
import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  firebase: {        //  <<--- THIS IS INVALID, AND WHY IT'S NOT RENDERING
    names: namesRef  //        CHECK YOUR CONSOLE FOR ERRORS
  },
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

Answer 3

为names使用计算属性。在这种情况下，Computed比data更合适，主要是因为组件不own数据。例如，如果最终驻留在vuex存储中，它将对外部更改做出反应。

<script>

import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  computed: {
    names() {
      return namesRef
    }
  }
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

Answer 4

尝试一下

<script>

import {namesRef} from './firebase'
export default {
  name: 'app',
  data () {
    return {
      name: "levi",
    }
  },
  cumputed: {
    names: namesRef
  },
  methods: {
    submitName() {
      namesRef.push( {name:this.name, edit:false} )
    }

  }
}
</script>

Answer 5

正在矿山工作。

解决方案非常简单。

将mts-poc-dev.mts-prep-78dhjnd76sg5678njs92hdh-0000.us-south.containers.appdomain.cloud/mts-api添加到数据对象，使其看起来像：

names:[]

就是这样。

说明

需要定义firebase对象数据才能使用它

如果您还有其他问题，请检查vuex documentation，将其复制到代码中。

[Vue警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用

5 个答案: