0

Не могу разобраться с хуками жизненного цикла, помогите, пожалуйста. Есть объект Vue App в нем data с несколькими переменными и methods с рядом функций.

Я хочу сделать обработку прелоада в зависмости от наполнения document.location.search Я пропсываю в mounted условие - "Если document.location.search не пустой, то запиши его значение в переменную operator, получи данные с сервера и выполни функцию check_operator". Но в результате я получаю сообщение

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'operators')"

Получается что объект Vue создается уже после хука mounted? Но на какой хук мне тогда вешать мои функции, которые должны автоматически отработать при загрузке страницы?

Мой код:

 var app = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
          operators:[],
          operator:"",
          },
        methods:{
          check_operator(operators){
            operators.forEach(function(item,i,operators){
                //некий код для каждого оператора, не существенно
               })
            }
          },
        mounted () {
          if(document.location.search!='')
            {
            $.ajax({
                  type: 'get',                        
                  url: 'main/get_operators.php',    
                  response: 'text',
                  data: {},  
                  async:false,                   
                  success:function (data) { 
                      this.operators=JSON.parse(data); 
                      this.check_operator(this.operators);       
                  }
               });
             this.operator=document.location.search;
             }
          }

Если первой строкой в mounted прописать console.log(app) то в консоли я вижу при загрузке страницы

undefined

Будто объект Vue еще не объявлен.

1 ответ 1

0

По вашему примеру, у вас несколько ошибок:

app.operator=document.location.search; 

у вас operators а пишите operator

app.operator=document.location.search;

доступ к свойствам производится через this , а вас сейчас app.operators а нужно this.operators

methods{

после метод нужно двоеточие methods:{

Изменения можно добиться путем использования computed свойства

8
  • >app.operator=document.location.search; Тут все верно, я беру одного оператора из адресной строки и пишу в app.operator А в app.operators я пишу всех операторов из БД: app.operators=JSON.parse(data); В строке с methods просто пропустил, набирал этот блок тут. С this.operators тоже пробовал. Ошибки не возникает, но app.operators остается пустым. ПРи этом если я сразу после присвоения this.operators=JSON.parse(data); вывожу console.log(this.operators), то вижу нужный массив, но app.operators остается пустым 30 окт 2022 в 19:13
  • Кстати, app.operator отрабатывает нормально при использовании this, почему тогда не работает app.operators - не могу понять 30 окт 2022 в 19:17
  • @Константин что-то не пойму вас, у вас вообще нет такого значения operator. Если не использовать This ошибка будет --- [Vue warn]: Error in mounted hook: "ReferenceError: Cannot access 'app' before initialization" (found in <Root>) 30 окт 2022 в 19:20
  • поправил код по вашим комментариям, получаю ошибку Uncaught TypeError: this.check_operator is not a function Если меняю вызов на app.check_operator то ошибка [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'check_operator')" 30 окт 2022 в 20:18
  • 1
    Нашел проблему, когда обращаюсь к this внутри ajax, this имеет значение ajax объекта, а не vue объекта. Объявил переменную, в которою записал результат запроса внутри ajax а затем за его рамками присвоил this.operators значение этой переменной. 30 окт 2022 в 20:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.