时间戳

首页 > 解决方案 > Axios 在选择时被触发

javascript - Axios 在选择时被触发

问题描述

我从服务器接收多个 json 文件。根据年份（2018、2019 和 2020），它们都可以在不同的网址上访问。我将这些年预填充到下拉列表中，但现在我想在每次更改值（？year=2018、？year=2019 或 ?year=2020）时使用 axios 触发 get 调用。我还有另一个预先填充了 ID 的下拉列表，但不知道如何将某个 ID 附加到选定的年份。这些下拉列表充当下面呈现的表格的过滤器。

所以更清楚地说，当我重新加载时，我会像这样触发当年的 get 调用：baseurl?year=2019，通过这个选择，我得到所有数据，但是如果我选择一个 ID，则需要将此 ID 添加到 url像这样：baseurl?year=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>

谢谢！

标签： javascripthtmlvue.jsgetaxios

解决方案

因此，如果我理解，您想在选择 id 时触发 axios 调用。这可以通过多种方式完成，但这种方式将触发 id 的选择以及年份的选择。

<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您所说的是“预填充 ID”的下拉列表。这两个 v-model 属性最初设置为 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 。

推荐阅读