Having trouble calling an async function in the mounted() lifecycle hook of Vue.js? Keep getting the error message: Uncaught TypeError: this.submitData is not a function. Here's the code snippet in question:
<template>
<section class="section-b-space">
<div class="container">
<div class="row">
<div class="col-lg-3 category-side col-md-4">
<div class="category-option">
<div class="accordion category-name" id="accordionExample">
<div class="accordion-item category-price">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour">Price</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse show"
aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="range-slider category-list">
<input type="text" class="js-range-slider" id="js-range-price" value="">
</div>
</div>
</div>
</div>
<div class="accordion-item category-rating">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseSix">
Category
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse show"
aria-labelledby="headingOne">
<div class="accordion-body category-scroll">
<ul class="category-list">
<li v-for="category in categories">
<div class="form-check ps-0 custome-form-check">
<input class="checkbox_animated check-it"
type="checkbox" @change="submitData" v-model="formData.category">
<label class="form-check-label">{{category.name}}</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import axios from 'axios';
export default{
props:{
categories: {
default: []
},
},
data(){
return {
formData:{
category: [],
price: '',
},
}
},
methods: {
async submitData(){
try{
const response = await axios.post('/api/category', this.formData)
console.log(response);
}
catch(error){
console.log(error)
}
},
},
mounted() {
$(".js-range-slider").on('change', () => {
this.submitData()
.then((res) =>{
console.log(res);
})
.catch((err) =>{
console.log(err);
});
});
}
}
</script>
This vue file is specifically tailored for use with Vue.js and is utilizing version 3.