Uncaught TypeError: this.submitData не является функцией
Я определил асинхронную функцию в методах, и при попытке вызвать ту же функцию в смонтированном виде... она выдает ошибку: Uncaught TypeError: this.submitData не является функцией. Пожалуйста, помогите мне, как вызвать асинхронную функцию в mount() в vue js. Ниже мой код -
<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.info(response);
}
catch(error){
console.info(error)
}
},
},
mounted() {
$(".js-range-slider").on('change', function(){
this.submitData()
.then((res)=>{
console.info(res);
})
.catch((err)=>{
console.info(err);
});
});
}
}
</script>
Это файл .vue, и я использую vue3.
можете ли вы поделиться более подробной информацией
Я хочу вызвать в submitData() в mounted(), но он недоступен. Та же функция, если я вызываю поле ввода, оно становится доступным. я не знаю, где я ошибаюсь.
Как называется файл, содержащий приведенный выше код? Можете ли вы предоставить код, связанный с тем, как вы вызываете его из другого компонента?
какая это версия vue? vue2 или vue3? - не уверен, что это имеет значение, но, похоже, в vue3 все работает нормально
Я обновил код и использую vue3. Пожалуйста, проверьте. Когда я вызываю ту же функцию в флажке, она работает, но не работает mounted()
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Глядя на следующие строки:
mounted() {
$(".js-range-slider").on('change', function() {
this.submitData()
.then((res)=>{
console.info(res);
})
.catch((err)=>{
console.info(err);
});
});
}
Мы видим, что вы прикрепили прослушиватель к событию «change» к элементу с классом js-range-slider, используя обратный вызов, определенный с помощью function.
Здесь важно отметить, что при использовании function() { } в обратном вызове значение this будет установлено на элемент, к которому был прикреплен прослушиватель (поэтому вы можете использовать такие вещи, как this.value, чтобы получить текущее значение).
Чтобы сохранить доступ к this из mounted(), который является вашим инициализированным компонентом, вы можете выполнить одно из следующих действий:
- Измените функцию стрелки для обратного вызова:
mounted() {
$(".js-range-slider").on('change', function() {
this.submitData()
становится
mounted() {
$(".js-range-slider").on('change', () => {
this.submitData() // `this` is inherited from `mounted()`
- Сохраните
thisизmounted()и используйте вместо этого это значение:
mounted() {
$(".js-range-slider").on('change', function() {
this.submitData()
становится
mounted() {
const instance = this;
$(".js-range-slider").on('change', function() {
instance.submitData()
- Сохраните
thisизmounted()в данные события, передав его в качестве второго аргументаon():
mounted() {
$(".js-range-slider").on('change', function() {
this.submitData()
становится
mounted() {
$(".js-range-slider").on('change', { component: this }, function(event) {
event.data.component.submitData()
Пожалуйста, не тегируйте спам. Выше нет ни jquery , ни node.js , и хотя вы используете axios, нет оснований полагать, что это связано с проблемой.