Question

Noob问题。如何访问单个文件Vue组件中的选项。特别是数据。我想将firebase数据推送到这个数据。我可以使用var self = this，然后在self函数下的firebase函数中引用created，但我想知道是否有更简洁的方法来执行此操作？

<template>
  <div id="app">
    <navbar></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

// Import firebase

var db = firebase.database();
var auth = firebase.auth();

module.exports = {
  name: 'app',
  data: function() {
    return {
      users: {},
      currentUser: {},
      quizzes: {},
      resources: []
    }
  },
  created: function() {
    var self = this;
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // Get info for currently signed in user. 
        console.log(user);
        this.currentUser = user;
        console.log(this.currentUser);
      } else {
        // No user is signed in.
      }
    })
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      this.quizzes = snapshot.val();
      console.log(this.quizzes);
    })

    var resourcesRef = db.ref('resources');
    resourcesRef.on('value', function(snapshot) {
      this.resources.push(snapshot.val());
      console.log(this.resources);
    })

    var usersRef = db.ref('users');
    usersRef.on('value', function(snapshot) {
      this.users = snapshot.val();
      console.log(this.users);
    })
  }
}
</script>

<style>
</style>

Answer 1

我相信您在询问Vue组件的data内定义的数据属性。

您只需this.users，this.currentUser，this.quizzes等。

如果您遇到问题，可能是因为您尚未使用arrow functions。

当你执行function（）{...}时，它会在里面创建一个新的范围，你的this内部函数与Vue组件的this不同。然后，您将无法使用this.currentUser等设置数据属性

相反，你应该使用() => {...} - 这就像函数一样，但不会在里面创建一个范围。

如果您有函数参数，则可以执行response => {...}或(arg1, arg2) => {...}

因此，在Vue应用程序中的所有位置，您可以按照以下步骤开始：

created: function() {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            // Set this user info in Vue component, so it becomes visible to your template 
            this.currentUser = user;
            // and so on...

如果这解决了这个问题，请告诉我。

访问单个文件Vue组件中的选项

1 个答案: