How to make a dynamic dropdown with Ajax in Vue.js

Question

I'm newbie to Vue.js. I've been stock in making a dynamic dropdown with Ajax in Vue.js. I have no idea how to populate the select tag with data from the API that is hosted in Google App Engine (GAE) and made in Flask.

File index.html

<div id="app2">
    <select v-model="table_list">
        <option v-for="item in table_list" :value="item">{{ item }}</option>
    </select>
</div>

new Vue({
  el: '#app2',
  data: {
    table_list: []
  },
  created: function () {
    var tableList = this.tableList
    axios.get('API_URL').then(function (response) {
      for (var i = 0; i < response.data.length; i++) {
        tableList.push(response.data[i])
      }
    }).catch(function (error) {
      console.log('failure')
    })
  }

The data of the API:

["test","test1","test2","test3"]

File flask.py

from flask import Flask, request
from google.cloud import bigquery
from flask import jsonify

app = Flask(__name__)

@app.route('/')
def tables_list():
    client = bigquery.Client()
    dataset_id = 'test_table'
    tables = client.list_tables(dataset_id)  # Make an API request.
    tables_list = [];

    for table in tables:
        tables_list.append(table.table_id)
    return jsonify(tables_list)

if __name__ == "__main__":
    app.run()

Peter Mortensen · Accepted Answer · 2021-01-31 07:32:26Z

1

v-model="table_list" should be a selected model, not the list itself.

<select v-model="table_list_selected">
   <option v-for="item in table_list">{{ item }}</option>
</select>

And data: should return a function, plus the model name is table_list, not tableList

new Vue({
  el: '#app2',
  data: () => ({
    table_list: [],
    table_list_selected: ''
  }),

Also, when you want to keep the scope of this when calling a function, either use arrow functions, or bind this to the function or do away with the callback and use async/await.

created: function () {
    axios.get('API_URL').then(response => {
      this.table_list = response.data
    }).catch(function (error) {
      console.log('failure')
    })
}

Or with bind()

created: function () {
    axios.get('API_URL').then(function(response) {
      this.table_list = response.data
    }.bind(this)).catch(function (error) {
      console.log('failure')
    })
}

Or with async/await

created: async function () {
    try {
       this.table_list = await axios.get('API_URL').data
    } catch (e) {
       console.log('failure')
    }
}

edited Jan 31, 2021 at 7:32

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 9, 2021 at 12:29

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

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

3 Comments

amaturePy Over a year ago

Thank you for your beautiful code . I tried all of them but option tag seems to be blank . Is there any prom in the format of api data ?? and I added API source coed (flask.py) for your reference

Lawrence Cherone Over a year ago

look in browser console network tab for the structure, make sure you fixed the typo and debug this.table_list, without seeing your complete code as it is when it's not working, cant tell specifically what the issue is

amaturePy Over a year ago

I debug in chrome developer console and I found out this prom is caused by CORS policy . thank you for your great advice

Peter Mortensen · Accepted Answer · 2021-01-31 07:33:30Z

1

You can consider using an existing flexible solution for selects/dropdowns with built-in support of dynamic contents.

E.g. Vue-Multiselect.

edited Jan 31, 2021 at 7:33

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 9, 2021 at 16:08

Ruslan Isay

1,0218 silver badges11 bronze badges

2 Comments

amaturePy Over a year ago

I debug in chrome developer console and I found out this prom is caused by CORS policy . thank you for your great advice

Peter Mortensen Over a year ago

CORS = Cross-origin resource sharing

Collectives™ on Stack Overflow

How to make a dynamic dropdown with Ajax in Vue.js

File index.html

File flask.py

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

File index.html

File flask.py

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related