Блог

Я новичок в Vue.js . Я был заинтересован в создании динамического выпадающего списка с Ajax в Vue.js . Я понятия не имею, как заполнить тег выбора данными из API, который размещен в Google App Engine (GAE) и выполнен в Flask.

Файл 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')
    })
  }
 

Данные API:

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

Файл 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()
 

v-model="table_list" должна быть выбранная модель, а не сам список.

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

И data: должен возвращать функцию, плюс имя модели table_list , а не tableList

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

Кроме того, если вы хотите сохранить область действия this при вызове функции, либо используйте функции со стрелками, либо привязку this к функции, либо отмените обратный вызов и используйте async / await .

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

Или с помощью bind()

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

Или с помощью async / await

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

Вы можете рассмотреть возможность использования существующего гибкого решения для выбора / выпадающих списков со встроенной поддержкой динамического содержимого.

Например, Vue-множественный выбор.