Axios получает вызов при выборе - PullRequest
Новая
       9

Axios получает вызов при выборе

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

Я получаю несколько файлов JSON с сервера. Все они доступны по разным URL-адресам в зависимости от года (2018, 2019 и 2020 годы). Я предварительно заполняю эти годы выпадающим списком, но теперь я хочу запускать вызов get с помощью axios каждый раз, когда меняю значение (? Year = 2018,? Year = 2019 или? Year = 2020). У меня также есть другой выпадающий список, который заполнен идентификаторами, но я не знаю, как прикрепить определенный идентификатор к выбранному году. Эти выпадающие списки действуют как фильтр для таблицы, представленной ниже.

Итак, чтобы быть более понятным, при перезагрузке я запускаю вызов get для текущего года следующим образом: baseurl? Year = 2019, при этом выборе я получаю ВСЕ данные, но затем, если я выбираю ID, этот идентификатор должен быть добавлено в URL, вот так: BaseUrl? год = 2019? ID = 0

Мой текущий код: 

data() {
 return {
  year:[],
  id: 0,
 }
},

computed: {
 axiosParams(){
  const params = new URLSearchParams();
  params.append('year', this.year);
  return params;
 },

 //this returns my current year
 year() {
  var now = new Date()
  var nowy = now.getFullYear()

  return nowy
},

 //this method makes sure that the dropdown is always preffiled 
 //with following years - eg. next year I only need 2019, 2020 and 
 //2021
 years() {
   var yearsArray = []
   var now = new Date()
   for (let i = -1; i < 2; i++) {
     var nowy = now.getFullYear() + i
     yearsArray.push(nowy)
   }
   return yearsArray
 },

},
methods: {
 getYears: function() {
    axios.get('myurl',{
     params : this.axiosParams
    }
    }).then((response) => {
      this.year = response.data;
      this.table = response.data;
    })
 },
 getId: function() {
    axios.get('myurl',{
     params : {
      year: this.year,
      id : this.id
    }
    }
    }).then((response) => {
      this.id = response.data;
      this.table = response.data;
    })
 },
},

created: {
 this.getYears();
 this.getId();
}

Мой HTML: 

<select v-model="year">
 <option v-model="yearsArray" v-for="year in years">{{year}} . 
</option></select>

<select v-model="id"><option v-for="item in id">{{item}}</option> . 
</select>

Спасибо!

1 Ответ

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

Итак, если я понимаю, вы хотите инициировать вызов axios, когда выбран идентификатор.Это может быть сделано несколькими способами, но этот способ сработает при выборе идентификатора, а также при выборе года. 

<select v-model="selectedYear"  @change="yearSelected">
  <option v-for="year in years" :key="year" :value="year">{{year}} .</option>
</select>

<select v-model="selectedId" @change="idSelected">
  <option v-for="id in ids" :key="id" :value="id">{{id}}</option> . 
</select>

Здесь years получено из вашего вычисленного свойства длялет и ids это то, что вы сказали, это выпадающий список "предварительно заполнены идентификаторами".Два свойства v-модели изначально устанавливаются в null, затем присваиваются значения при выборе.Они определены в данных следующим образом. 

data: () => ({
  selectedId: null,
  selectedYear: null,
}),

У каждого есть вызов функции, чтобы сделать что-то с выбранной опцией, @change="idSelected", которая вызывает этот метод: 

methods: {
  idSelected() {
    console.log(this.selectedId)
    // here you make you axios call using this.selectedId as the param
    axios.get('myurl',{
      params : {
        year: this.selectedYear,
        id : this.selectedId
      }
    }, 
...
}

Вы можете иметьдва выбираются без @change и имеют кнопку, которая запускает вызов функции с помощью @click.В любом случае вы используете selectedId и selectedYear в этом методе.

...