Javascript Axios在选择时触发调用

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

因此，更清楚地说，当我重新加载时，我会对当前年份发出一个get调用，如：baseurl？year=2019，通过此选择，我会获取所有数据，但如果我选择一个ID，则需要将此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();
}

data（）{
返回{
年份：[]，
id:0，
}
},
计算：{
axiosParams（）{
const params=新的URLSearchParams（）；
参数附加（“年”，本年）；
返回参数；
},
//这将返回我的当前年份
年份（{
var now=新日期（）
var nowy=now.getFullYear（）
立即返回
},
//此方法确保下拉列表始终是预归档的
//接下来的几年——例如，明年我只需要2019年、2020年和2020年
//2021
年（）{
var yearsArray=[]
var now=新日期（）
for（设i=-1；i<2；i++）{
var nowy=now.getFullYear（）+i
yearsArray.推（现在）
}
回归年
},
},
方法：{
getYears:function（）{
get（'myurl'{
params:this.axiosParams
}
})。然后（（响应）=>{
this.year=response.data；
this.table=response.data；
})
},
getId:function（）{
get（'myurl'{
参数：{
年份：今年，
id:这个是
}
}
})。然后（（响应）=>{
this.id=response.data；
this.table=response.data；
})
},
},
创建：{
这个。getYears（）；
这个.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>

{{年}。
{{item}}。

---

谢谢

所以，如果我理解的话，您希望在选择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>

每个都有一个函数调用，用于对所选选项执行操作，

@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
      }
    }, 
...
}

---

您可以在不更改

@的情况下选择这两个选项

，并有一个按钮，通过

@单击

触发函数调用。无论哪种方式，您都可以使用该方法中的selectedId和selectedYear。

谢谢！这很有魅力。我如何在两个不同的电话之间进行过滤？我创建了另一个问题：）在所选年份，我得到了整个表，包括嵌套的category对象，在另一个调用中，我只得到categories。在“类别选择”中，我需要筛选表格，使其仅显示选定的类别值：）我还有一个问题。由于所选年份的值设置为null，因此在重新加载页面时，我有一个空白的select。如何保留此功能并预选本年度？没有硬编码的数据。。。谢谢如果您只想将“selectedYear”预设为当前年份，您可以这样初始化它：

selectedYear:new Date（）.getFullYear（）

.Ha！我有一套，但在另一个数据属性上。我没有意识到我可以在selectedYear上使用它而不是空值。我测试了它，它工作了！非常感谢你！

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
      }
    }, 
...
}