Vue 属性未定义

Question

我正在尝试完成一项 FreeCodeCamp 挑战。这是一个随机报价生成器，我终于找到了一个可以在 CodePen 上运行的 API 站点。

我的问题是它似乎有效。我运行脚本，它给了我一个随机报价，因此 API 和 fetch() 工作。但是控制台一直给我一个cannot read property 'quote' of undefined，这会破坏我的JavaScript，并且不会让我点击我的按钮来获取另一个。

我在这里使用 Vue，而且我对 Vue 还很陌生。在今天之前我实际上从未使用过 Vue，但是在通过 Vue.js 的介绍之后，我认为我至少可以处理这个问题，所以我决定用 Vue 来做这件事。据我了解，我不明白引号数组是如何未定义的。我的 JSON 文件中有 10 个引号，随机函数包含在内，所以它只会抓取 0-9，所以不是索引越界的问题。

以下是相关代码（一个 .html 文件和一个 .js 文件）：

<h1>Random Quote Generator</h1>

<div id="quote-block">
  <span id="quote">{{ quotes[index].quote }}</span>
  <p><span id="author">-{{ quotes[index].author }}</span></p>
  <p><button id="new-quote">New Quote</button></p>
</div>

const app = new Vue({
    el: '#quote-block',
    data: {
      quotes: [],
      index: random(0,9)
    },
    created() {
      fetch('https://api.myjson.com/bins/1fb9jb')
        .then(response => response.json())
        .then(json => this.quotes = json.quotes)
        .catch(error => console.log(error));
      currentColor = colorize();
    },
    // getQuotes: ()=> {
    //   this.index = random(0,9);
    //   currentColor = colorize();
    // }
});

完整的代码笔（其余的只是随机颜色生成器和与 Vue 或此问题无关的鼠标悬停）在这里：https://codepen.io/jkuhl/pen/JMrxGV?editors=1010

注释代码将是使用@click 实现的点击事件代码

每当我尝试访问引号数组中对象的值时都会收到此错误。我可以访问引号数组本身，这些值没有问题。就像我用 {{quotes}} 而不是 {{quotes[index].quote }} 我得到整个数组显示得很好。当我尝试访问数组中对象的值时，我的脚本就会中断。我做错了什么？

Answer 1

您看到的错误是由于在获取引号之前尝试绑定 quotes[index].quote 的值引起的，因此您需要使用 v-if 有条件地呈现该部分：

<div id="quote-block" v-if="quotes.length">
  <span id="quote">{{ quotes[index].quote }}</span>
  <p><span id="author">-{{ quotes[index].author }}</span></p>
  <p><button id="new-quote">New Quote</button></p>
</div>

仅当引号数组的长度大于零时，这将呈现 div。除此之外，您应该尝试更多地按照“vue 方式”来组织代码，就像其他答案所说的那样。

Answer 2

首先，vue组件中的函数需要在methods对象中，就像data一样。参考：https://vuejs.org/v2/guide/events.html。然后，您可以使用 v-on 为 HTML 中的元素设置侦听器：<button id="new-quote" v-on:click="getQuotes">New Quote</button>

只需按照上面链接中的正确模式，我就能让您的代码正常工作。

这是相关代码。

HTML：

<div id="quote-block">
  <span id="quote">{{ quotes[index].quote }}</span>
  <p><span id="author">-{{ quotes[index].author }}</span></p>
  <p><button id="new-quote" v-on:click="getQuotes">New Quote</button></p>
</div>

JS：

const app = new Vue({
    el: '#quote-block',
    data: {
      quotes: [],
      index: random(0,9)
    },
    created() {
      fetch('https://api.myjson.com/bins/1fb9jb')
        .then(response => response.json())
        .then(json => this.quotes = json.quotes)
        .catch(error => console.log(error));
      currentColor = colorize();
    },
    methods: {
      getQuotes: function (event) {
        this.index = random(0,9);
        currentColor = colorize();
      } 
    }
  }); //End Vue

您可以在https://codepen.io/anon/pen/odBbLW?editors=1011 看到完整的笔（为简洁起见，我删除了一些着色器代码）。它仍然在加载时出错，但按钮可以工作。

额外提示：将代码包装在匿名自执行函数中意味着您无法在控制台中引用该范围内定义的变量。所以你不能在 codepen/devtools 控制台中做app.$data.quotes，这只会让调试变得困难。当您只是测试这样的小事情时，无需使用匿名自执行函数。