Question

我从mount（）webhook中的REST api通过axios调用得到了很好的响应，我知道如何正确地做到这一点：

const vm = new Vue({
    el: '#flashcard-app',
    data: {
        card : cards[index],
        cards: cards,
    },

    mounted() {
        axios.get(url).then(response => {
            this.cards = response.data
        });
    },

当我尝试像这样简单地输出我的纸牌集合时： {{cards}} ，它以一种不错的JSON正确方式很好地显示了。

但是

当我尝试以如下所示的特定方式显示此收藏集时，它在控制台中崩溃并表示未防御

<li v-on:click="toggleCard(card)" id="list">
        <transition name="flip">
            <p class="card" v-if="!card.flipped" key="question">
                {{card.question}}
            </p>
            <p class="card" v-else key="answer">
                {{card.answer}}
            </p>
        </transition>
    </li>
</ul>


<div  v-if="card.flipped">
    <button class="button-card btn btn-success" id="remember" v-on:click="next()">Remember</button>
    <button class="button-card btn btn-danger" id="don't" v-on:click="next()">Don't Remember</button>
    <button class="button-card btn btn-warning" id="!sure" v-on:click="next()">Not Sure</button>
</div>

问题是，当我尝试对硬编码的const集合执行相同的操作时，它就可以正常工作！

我认为它以某种方式与生命周期相关联，但是我已经尝试过beforeCreate（）和created（），而且似乎根本不起作用（

我能以某种方式在vue组件之外获得对const的axios响应吗？

Answer 1

我的代码可以看看。我所做的是安装包裹，这是一个捆绑器，可以将所有javascript文件捆绑为一个文件，这样可以导入软件包。

// HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <section id="app">
      <h1>{{ message }}</h1>
      <section id="posts">
        <ul>
          <li v-for="post in posts">
            {{ post.title }}
          </li>
        </ul>
      </section>
    </section>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="./index.js"></script>
</html>

// js

import axios from 'axios';

new Vue({
  el: '#app',
  data: {
    message: 'hello world',
    posts: [],
  },
  created() {
    this.message = 'post app';
    const url = 'https://jsonplaceholder.typicode.com/posts';
    axios.get(url).then(data => {
      this.posts = data.data;
    });
  },
});

包裹

https://parceljs.org/

您需要一个package.json，使用npm init --y

安装

这是一种不同的方法，但是它可以工作。

Answer 2

您收到的“未定义卡”错误不是来自HTML，而是来自以下代码段：

data: {
    card : cards[index],
    cards: cards,
}

这是什么卡？除非您在名为cards的Vue实例之外有一个全局变量，否则所有分配都会失败。

最佳做法是从将cards初始化为空列表，将card初始化为空：

data: {
    card : null,
    cards: [],
}

然后，您可以实现created()钩子，发出请求并填充卡列表。

如果您始终想将card设置为列表中的第一张卡片，则可以使用计算属性来监视cards变量中的更改。

created() {
    axios.get(url).then(response => {
        this.cards = response.data
    });
}

在Vue实例外部的全局const中获取axios响应数据

但是

2 个答案: