Axios во vuejs. Проблема с областью видимости? Добрый день.
Делаю поиск. Использую vue и axios. Требуется, чтоб запрос отправился по окончанию ввода. Нашел решение, как сделать это через setTimeout, теперь абсолютно запутался, как вернуть результат запроса в свойство компонента:
import axios from 'axios'
export default {
data: function () {
return {
inputString: "",
telbook: [],
};
},
computed:{
translateSearch: function () {
if (this.inputString.length {
// ВОПРОС:
// как передать ответ сервера в this.telbook???
this.telbook = response.data
}), (error) => {
console.log(error)
}
console.log(response);
}, 400)
}
}
}
Помогите, пожалуйста, джуниору
Axios во vuejs. Проблема с областью видимости? Добрый день.
Делаю поиск. Использую vue и axios. Требуется, чтоб запрос отправился по окончанию ввода. Нашел решение, как сделать это через setTimeout, теперь абсолютно запутался, как вернуть результат запроса в свойство компонента:
import axios from 'axios'
export default {
data: function () {
return {
inputString: "",
telbook: [],
};
},
computed:{
translateSearch: function () {
if (this.inputString.length {
// ВОПРОС:
// как передать ответ сервера в this.telbook???
this.telbook = response.data
}), (error) => {
console.log(error)
}
console.log(response);
}, 400)
}
}
}
Помогите, пожалуйста, джуниору
Делаю поиск. Использую vue и axios. Требуется, чтоб запрос отправился по окончанию ввода. Нашел решение, как сделать это через setTimeout, теперь абсолютно запутался, как вернуть результат запроса в свойство компонента:
import axios from 'axios'
export default {
data: function () {
return {
inputString: "",
telbook: [],
};
},
computed:{
translateSearch: function () {
if (this.inputString.length {
// ВОПРОС:
// как передать ответ сервера в this.telbook???
this.telbook = response.data
}), (error) => {
console.log(error)
}
console.log(response);
}, 400)
}
}
}
Помогите, пожалуйста, джуниору
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Проблема здесь заключается в том, что внутри функции переданной в window.setTimeout, контекст this теряется и поэтому вы не можете обратиться к свойству telbook вашего компонента. Для решения этой проблемы можно использовать стрелочные функции, которые не создают свой собственный контекст и используют контекст родительской функции.
Измените ваш метод doSearch следующим образом:
doSearch: function (searchString) {window.clearTimeout(this.timeout);
this.timeout = window.setTimeout(() => {
axios.get('http://teldistr/search.php', {params: {
search_string: searchString,
}}).then((response) => {
this.telbook = response.data;
}).catch((error) => {
console.log(error);
});
}, 400);
}
Теперь, используя стрелочную функцию, вы сможете обращаться к свойствам вашего компонента через this.