我从服务器接收多个 json 文件。它们都可以根据年份（2018、2019 和 2020）在不同的 url 上访问。我将这些年预填充到下拉列表中，但现在我想在每次更改值（？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>
谢谢！
相关分类