link822 link823 link824 link825 link826 link827 link828 link829 link830 link831 link832 link833 link834 link835 link836 link837 link838 link839 link840 link841 link842 link843 link844 link845 link846 link847 link848 link849 link850 link851 link852 link853 link854 link855 link856 link857 link858 link859 link860 link861 link862 link863 link864 link865 link866 link867 link868 link869 link870 link871 link872 link873 link874 link875 link876 link877 link878 link879 link880 link881 link882 link883 link884 link885 link886 link887 link888 link889 link890 link891 link892 link893 link894 link895 link896 link897 link898 link899 link900 link901 link902 link903 link904 link905 link906 link907 link908 link909 link910 link911 link912 link913 link914 link915 link916 link917 link918 link919 link920 link921 link922 link923 link924 link925 link926 link927 link928 link929 link930 link931 link932 link933 link934 link935 link936 link937 link938 link939 link940 link941 link942 link943 link944 link945 link946 link947 link948 link949 link950 link951 link952 link953 link954 link955 link956 link957 link958

[Vue.js] Axios get call fired on select

when receiving multiple json files from a server. They are all accessible on different urls based on years (2018,2019 and 2020). when prefilling these years into a dropdown but now to fire a get call with axios everytime I change the value(?year=2018, ?year=2019 or ?year=2020). I also have another dropdown that is prefilled with IDs but have no idea how to attach a certain ID to selected year. These dropdowns are acting as filter for a table that is rendered below.

So to be more clear, when I reload I fire a get call for current year like so: baseurl?year=2019, with this selection I get ALL the data but then if I select an ID, this ID needs to be added to url like so:
baseurl?year=2019?id=0

My current code:

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();
}

My 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>

Thanks!

Solution :

Correct me if I’m wrong but what you are essentially asking is ‘how to watch query change’

if so you can check this link

Solution 2:

So, if I understand, you want to trigger an axios call when an id is selected. This can be done a couple of ways but this way will trigger on the selection of an id, and also on the selection of a year.

<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>

Here, the years is from the computed property for years and ids is what you said was a dropdown “prefilled with IDs”. The two v-model properties are initially set to null then are assigned a value on selection. They are defined in data like so.

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

Each has a function call to do something with the selected option, @change=”idSelected” which calls this method:

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

}

You could have the two selects without the @change and have a button that triggers the function call with @click. Either way you use the selectedId and selectedYear in that method.