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}}而不是{{quotes [index] .quote}}一样，我得到的整个数组都很好。当我尝试访问数组中对象的值时，我的脚本会中断。我做错了什么？

Answer 1

首先，vue组件中的函数需要位于methods对象中，就像data一样。请参阅：https://vuejs.org/v2/guide/events.html。然后，您可以使用v-on：<button id="new-quote" v-on:click="getQuotes">New Quote</button>

为HTML中的元素设置侦听器

我只需遵循上面链接中的正确模式即可使您的代码正常工作。

以下是相关代码。

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看到完整的笔（为了简洁，我删除了一些colourizer代码）。它仍然在加载时出错，但按钮有效。

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

Answer 2

您提到的错误是由于在获取引号之前尝试绑定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方式”组织代码。像其他答案那样做事。

Vue属性未定义

2 个答案: