Issue
I am newbie in vuejs. I want to reload component items according to another choice.
Example: I want to reload posts list according to tag/category user selected.
How can I do it? where do I need to put a new ajax call?
Also ajax call is different from tags to categories.
I think add ajax call in created
method like simple component loaded on page loading will not help. How to do this?
thanks
<template>
<div>
<div class="pt-2 pb-3">
<input type="hidden" name="my_variable" v-model="myVar" @change="foo">
</div>
</div>
</template>
<script>
export default {
data() {
return {
myVar: null,
};
},
methods: {
submit: function(e) {},
async foo() {
console.log('foo', this.myVar);
}
}
};
</script>
Solution
It depends. If you have the tag/category in the instanciation of the component then yeah, you can make the call in the created
lifecycle.
export default {
data: () => ({
options: []
}),
methods: {
async getOptions(){
const response = await axios.get('/items');
this.options = response.data
}
}
}
If you don't have the tags in the creation of the component and need to change when the user selects a category you can do the ajax call when the user changes the options:
<template>
<select v-model="optionSelected" @change="getOptions">
<option value="1">First Value</option>
<option value="2">Second Value</option>
</select>
</template>
<script>
export default {
data: () => ({
optionSelected: null,
options: [],
}),
methods: {
async getOptions(item) {
const response = await axios.get('/items', { params: { filter: item } });
this.options = response.data;
}
}
}
</script>
Edit after OP updated question
When you have an input
, every time the user inputs something the browser emits an event called input
. When you have a select
element, the browser emits an event called change
. In this case since you are using an input
we should be using @input
and not @change
<input type="hidden" name="my_variable" v-model="myVar" @input="foo">
You can read more about it here
Besides that when you listen to an input
event the first parameter of the function will be the value passed:
async foo(value) {
console.log(value, this.myVar);
}
Answered By - Bruno Francisco Answer Checked By - Gilberto Lyons (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.