Problem incorporating data got from API vue.js

Question

After get API call with a string input attached, I get the result alright. The problem I have is incorporating it to my frontend. I have tried a lot of solutions that I found online but nothing working and cannot understand. So far I have done this:

<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>

I am a bit lost with javascript as I am new to it, all kinds of help are welcome, Thank you in advance! :)

EDIT: the file I get from the API is JSON

Try using separate names for array and element: v-for="overview_item in overview" — user5734311
– user5734311, Commented Aug 5, 2020 at 8:33
I also suggest you add type="button" to your <button> element — Phil
– Phil, Commented Aug 5, 2020 at 8:40
@ChrisG surprisingly, that doesn't appear to be a problem for Vue ~ jsfiddle.net/hwy3okna — Phil
– Phil, Commented Aug 5, 2020 at 8:52

procoib · Accepted Answer · 2020-08-05 08:59:32Z

1

Looks as though you are trying to call a method outsides of the vue app itself. You have the el: "results" but you are trying to invoke a vue method within your button outside of its context.

Try something like this:

<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>

answered Aug 5, 2020 at 8:59

procoib

4871 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil · Accepted Answer · 2020-08-05 23:18:57Z

1

Some problems here...

You're including Vue twice (https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js and https://unpkg.com/vue/dist/vue.js). Don't do that
You cannot use a v-for directive on your root Vue element
Your form is outside your Vue root so you won't be able to use v-on
Your submit button will submit the form normally. There's nothing stopping that from happening
Your input value is never used. You should try binding it to a data property

Change your HTML to

<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>

and in your JS, replace data with

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

Then you can use this.input if you ever need to get the value the user types in.

Here's an example using a placeholder 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>

Other notes:

Avoid using the same variable name for your array and iterable.
- Bad - v-for="overview in overview"
- Good - v-for="thing in things"
VueResource is long dead. Avoid using it or at least update to the latest version (1.5.1)

edited Aug 5, 2020 at 23:18

answered Aug 5, 2020 at 8:56

Phil

166k25 gold badges265 silver badges269 bronze badges

3 Comments

Bernnt Over a year ago

i did all this but still nothing, it rederects me to 127.0.0.1:1880/?input=******* without showing any changes to the website

Phil Over a year ago

@Bernnt sounds like something else is going wrong. I bet there's some errors in your console

Phil Over a year ago

@Bernnt I've updated my answer with a runnable snippet and it works fine

Collectives™ on Stack Overflow

Problem incorporating data got from API vue.js

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related