Проблема с включением данных, полученных из API vue. js - PullRequest
Новая
       79

Проблема с включением данных, полученных из API vue. js

2 голосов
/ 05 августа 2020

После вызова API get с прикрепленной строкой, я хорошо получаю результат. У меня проблема в том, чтобы включить его в свой интерфейс. Я пробовал много решений, которые нашел в Интернете, но ничего не работало и не мог понять. Пока что я сделал это: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = text/javascript src = https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<form action="http://127.0.0.1:1880/" target="_self">
    <label for="request"><strong>Please insert the input here:</strong></label><br>
    <input type="text" id="request" name="input"><br>
    <button v-on:click="getOverview($event)">Submit</button>
</form>
<h1 id="results" v-for="overview in overview">
    {{overview}}
</h1>
<script type = text/javascript >
    new Vue({
        el: "#results",
        data() {
            return {
                overview: []
            }

        },
        methods: {
            async getOverview(event) {
                try {
                    const {data:{json:{sub_regions}}} = await axios.get('http://127.0.0.1:1880/');
                    console.log('results data', sub_regions);
                    this.overview = sub_regions;
                }
                catch (error) {
                    console.log(error);
                    return [];
                }
            }
        },
        created(){
            this.getOverview()
        }
    })
</script>
</body>
</html>

Я немного потерялся с javascript, поскольку я новичок в этом, всяческая помощь приветствуется, заранее спасибо! :)

ИЗМЕНИТЬ: файл, который я получаю от API, - JSON

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Похоже, вы пытаетесь вызвать метод вне самого vue приложения. У вас есть el: "results", но вы пытаетесь вызвать метод vue внутри своей кнопки вне ее контекста.

Попробуйте что-то вроде этого: 

<div id="results">
  <form action="http://127.0.0.1:1880/" target="_self">
      <label for="request"><strong>Please insert the input here:</strong></label><br>
      <input type="text" id="request" name="input"><br>
      <button v-on:click="getOverview($event)">Submit</button>
  </form>
  <h1 v-for="overview in overview">
      {{overview}}
  </h1>
</div>
1 голос
/ 05 августа 2020

Здесь проблемы ...

  1. Вы включаете Vue дважды (https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js и https://unpkg.com/vue/dist/vue.js). Не делайте этого
  2. Вы не можете использовать директиву v-for в своем root Vue элементе
  3. Ваша форма находится за пределами вашего Vue root, поэтому вы не будете иметь возможность использовать v-on
  4. Кнопка отправки отправит форму как обычно. Ничто не мешает этому случиться.
  5. Ваше значение input никогда не используется. Вы должны попробовать привязать его к свойству данных

Измените HTML на 

<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please insert the input here:</strong>
    </label> 
    <br>
    <input type="text" id="request" name="input" v-model="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item }}
  </h1>
</div>

, а в JS замените data на 

data: () => ({
  overview: [],
  input: ''
})

Затем вы можете использовать this.input, если вам когда-нибудь понадобится получить значение, которое вводит пользователь.

Вот пример использования API-заполнителя 

new Vue({
  el: "#results",
  data: () => ({
    overview: [],
    input: ''
  }),
  methods: {
    async getOverview ($event) {
      let url = 'https://jsonplaceholder.typicode.com/users'
      if (this.input) {
        url += `/${encodeURIComponent(this.input)}`
      }
      try {
        const { data: sub_regions } = await axios.get(url)
        console.log('results data', sub_regions);
        this.overview = Array.isArray(sub_regions) ? sub_regions : [ sub_regions ]
      } catch (error) {
        console.log(error);
        this.overview = []
      }
    }
  },
  created() {
    this.getOverview()
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please insert the user ID here:</strong>
    </label>
    <br>
    <input type="number" id="request" name="input" v-model.number="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item.name }}
  </h1>
</div>

Другие примечания:

  • Избегайте использования одного и того же имени переменной для массива и итерации.

    • Плохо - v-for="overview in overview"
    • Хорошо - v-for="thing in things"

  • VueResource давно мертв. Не используйте его или по крайней мере обновите до последней версии (1.5.1)

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

Нет похожих вопросов

...