Question

我有以下JS，我正在尝试翻译成Vue JS。我被告知计算属性将是要走的路。我仍然对计算属性有点困惑。我知道我希望它如何运作，我希望它的输入是列表中项目的关键。我希望输出是一个'相关'数组，然后我可以在子列表中循环。如果您在查看时遇到问题，请参阅此CodePen任何帮助都会很棒。

// Initialize Firebase
const db = firebase
    .initializeApp({
        databaseURL: "...firebaseio.com"
    })
    .database();

const contentRef = db.ref("a");
const relatedRef = db.ref("test");

new Vue({
    el: "#app",
    data: {
        related: {}
    },
    firebase: {
        content: contentRef,
        related: relatedRef
    },
});

var theKey = "objectb"

function getDiscoverBarContent(key, cb) {
    relatedRef.child(key).on("child_added", snap => {
        let relateRef = contentRef.child(snap.key);
        relateRef.once("value", cb);
    });
}

getDiscoverBarContent(theKey, snap => {
    var snapVal = snap.val();
    console.log(snapVal)
});

HTML

<div id="app">
  <div>
    <h2>Content</h2>
    <pre><code>{{content}}</code></pre>
  </div>
  <div>
    <h2>'Related' Content</h2>
    <pre><code>{{related}}</code></pre>
  </div>
  <div>
    <h2>'Results'</h2>
    <ul>
      <li v-for="thing in content">{{thing.name}}
        <ul>
          <li v-for="relation in related">{{relation.name}}</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

编辑：我的尝试：CodePen

computed: {
    relatedThings: function () {
    var theKey = "objectb"
        var output = []

        function getDiscoverBarContent(key, cb) {
            relatedRef.child(key).on("child_added", snap => {
                let relateRef = contentRef.child(snap.key);
                relateRef.once("value", cb);
            });
        }

        getDiscoverBarContent(theKey, snap => {
            var snapVal = snap.val();
            console.log(snapVal)
            var output = snapVal
        });

  return snapVal;
    }
}

错误：

ReferenceError：未定义snapVal。

请注意，这是我的尝试，我不确定它会起作用。

我应该补充......我的JS技能缺乏。我知道为什么会出现这个问题，但不知道如何解决。

Vue计算属性设置问题

0 个答案: