Получите данные ответа axios в глобальном константе вне экземпляра Vue - PullRequest
Новая
       12

Получите данные ответа axios в глобальном константе вне экземпляра Vue

0 голосов
/ 08 мая 2019

Я получаю хороший ответ от вызова axios от моего REST API в mount () webhook, и я знаю, как это сделать правильно: 

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>

Дело в том, что когда я пытаюсь сделать то же самое с жестко закодированной коллекцией констант, она работает просто отлично!

Я думаю, что это таккак-то связано с жизненным циклом, но я уже пробовал beforeCreate () и созданный (), и он, кажется, не работает вообще (

Могу ли я как-то получить свой ответ axios на const, вне компонента vue

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Получаемая вами ошибка "Карты не определены" не из вашего HTML-кода, а из этого фрагмента: 

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

Что такое карты на данный момент? Если у вас нет глобальной переменной вне экземпляра Vue с именем cards, оба назначения завершатся ошибкой.

Лучше всего начинать с инициализации cards пустым списком и card с нуля: 

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

Затем вы можете реализовать хук created(), сделать запрос и заполнить список карт.

Если вы всегда хотите установить card, скажем, на первую карту в списке, которую вы можете наблюдать за изменениями в переменной cards, используя вычисляемое свойство. 

created() {
    axios.get(url).then(response => {
        this.cards = response.data
    });
}
0 голосов
/ 08 мая 2019

Мой код работает, посмотрите. То, что я сделал, это установил пакет, который представляет собой пакет, который объединяет все ваши файлы 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

Это другой подход, но он может сработать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...