мне нужен простой массив, а не [__ob__: Observer]

Я вызываю API для получения данных, я тестирую его с помощью почтальона, а laravel отправляет его как массив правильно, но vue превращает мой массив в [ob: Observer], и я не могу извлечь свой массив благодаря @Stockafisso он был решен, но

Изменить: теперь моя проблема в том, что массив programming_languages ​​доступен только внутри метода getLanguages ​​() и больше нигде

 data(){
        return{
             answer: '',
             maxWrong: '',
            programming_languages : []              
        }
    },

    methods:{

        getLanguages(){
            axios.get('/api/toController').then((response)=> { 
  this.programming_languages = JSON.parse(JSON.stringify(response.data)); //works fine

this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name; //works fine
          this.maxWrong = this.answer.length;// works fine here, i dont want to initiaize answer variable in this method
                  
        
            });
        },

randWord(){
        this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name;// it is not working here
//Error in created hook: "TypeError: Cannot read property 'name' of undefined"
            this.maxWrong = this.answer.length;// doesn't work here
          
        }

    },
    created(){
           this.getLanguages();
           this.randWord();
    }

что я могу сделать? Спасибо


vue.js laravel vue-reactivity
person Ramin Safari    schedule 28.06.2020    source источник
comment
Вы можете показать нам ответ API?   -  person Hamid Ali    schedule 28.06.2020
comment
return ModelName :: all (); он отправляет вложенный массив, я тестировал его почтальоном, это было правильно, и я также могу видеть массив внутри [ob: Observer], когда я использую JSON.parse (JSON.stringify (response.data), но я не могу его извлечь в массив   -  person Ramin Safari    schedule 28.06.2020

Ответы (2)


arrow_upward
0
arrow_downward

наиболее вероятная ошибка (и) здесь: this.programming_languages.push(JSON.parse(JSON.stringify(response.data)));

вы вставляете возвращаемый Laravel массив внутри объявленного programming_languages, при этом вы должны переопределить или объединить его. Чтобы лучше объяснить, небольшой пример:

учти это:

let arr1 = [];
let arr2 = [1,2,3];

если вы сделаете arr1.push(arr2), ваш arr1 будет [[1,2,3]], а вы хотите, чтобы он был [1,2,3].

Возвращаясь к проблеме, исправить ее можно двумя способами:

a)

.then((response)=> { 
                 this.programming_languages = JSON.parse(JSON.stringify(response.data));

b)

.then((response)=> { 
let swapArray = [...this.programming_languages];
this.programming_languages = swapArray.concat(JSON.parse(JSON.stringify(response.data)));

Если это не устраняет ошибку, возможно, проблема в массиве, возвращенном Laravel. Если у него нет числовых или не отсортированных ключей, JS заполнит отсутствующие пробелы Ob. Наблюдатель постарается сохранить ключи.

person Raffobaffo    schedule 28.06.2020
comment
спасибо за ваше доверие @Stockafisso, на самом деле это вложенный массив, содержащий строковое и числовое значение, которые генерируются из базы данных, когда я вручную заполняю массив Program_languages, ошибки нет, я могу легко, например, console.log (this.programming_languages ​​[0] .columnName)), но когда я беру его из базы данных, я не могу извлечь массив и установить его в массив, [ob: Observer] мешает - person Ramin Safari; 28.06.2020
comment
кстати, вложенный массив упорядочен на основе идентификатора (первичного ключа базы данных) и [ob: Observer] отлично работает с ‹шаблоном v-for›, но это не то, что я хочу, если я могу преобразовать [ ob: Observer] в простой массив, я знаю, что делать - person Ramin Safari; 28.06.2020
comment
Привет, Рамин, Тем не менее, если это вложенный массив, вы должны объединить его, а не нажимать. Чтобы убедиться, что я прав, просто попробуйте сделать this.programming_languages[0][0].name - person Raffobaffo; 28.06.2020
comment
привет, Stockafisso, большое спасибо, это прекрасно работает, когда я console.log (this.programming_languages ​​[0] [0] .name); но когда я this.answer = this.programming_languages ​​[0] [0] .name; он выдает ошибку TypeError: не удается прочитать свойство 'name' неопределенного значения, имя - это столбец в базе данных, я хочу ‹h2› {{answer}} ‹/h2› - person Ramin Safari; 28.06.2020
comment
Привет, @RaminSafari, отлично. Значит, мое решение правильное. Вместо использования [0] [0] просто используйте одно из двух опубликованных мной решений (a, b), и вы сможете получить доступ к объектам в массиве. Что касается this.answer = this.programming_languages[0][0].name;, это больше похоже на проблему, когда вы на самом деле выполняете этот запрос, возможно, массив еще не создан. Пожалуйста, примите мой ответ как правильный :) - person Raffobaffo; 28.06.2020
comment
дорогой Stockafisso, я получил результат с помощью this.programming_languages.push (JSON.parse (JSON.stringify (response.data))); не этими двумя методами, которые вы упомянули, но большое спасибо, потому что я могу извлечь массив так, как вы сказали this.programming_languages ​​[0] [0] .name; Я застрял в ошибке типа, на самом деле, когда я использую Program_language [0] [0] .name в другом методе (кроме getLanguages), он выдает ошибку tyoe, а также не может прочитать свойство '0' неопределенного - person Ramin Safari; 28.06.2020
comment
Привет, эта строка this.programming_languages.push(JSON.parse(JSON.stringify(response.data))) неверна. Как было сказано, используйте один из двух методов, которые я опубликовал здесь, в моем решении, иначе вы не получите его. Кстати, вы также должны проверить, почему вы кодируете JSON и декодируете значения в одной строке, которая, скорее всего, там не нужна. - person Raffobaffo; 28.06.2020
comment
stockafisso спасибо за вашу настойчивость, я пробовал оба способа снова и снова, но не работал, но метод push работает нормально, я могу легко использовать this.programming_languages ​​[0] [0] .anyColumn, но когда я записываю эту самую строку кода в других методах выдает ошибку. Невозможно прочесть свойство "0" неопределенного значения. - person Ramin Safari; 28.06.2020
comment
Если вы используете один из предложенных мной методов, вы не должны использовать [0] [0] для доступа к содержимому первого элемента в массиве, а вместо этого [0]. - person Raffobaffo; 28.06.2020
comment
привет Stockafisso, вы правы, я могу использовать console.log (this.programming_languages ​​[1] .name); когда подход u сказал, но я не могу использовать этот допустимый код внутри другого метода, TypeError: не удается прочитать имя свойства undefined - person Ramin Safari; 28.06.2020
comment
randWord () {console.log (this.programming_languages ​​[Math.floor (Math.random () * this.programming_languages.length)]. имя); } я получаю ошибку Ошибка в созданном хуке: TypeError: не удается прочитать свойство name of undefined, но если я консолью его внутри getLanguages ​​(), он работает нормально - person Ramin Safari; 28.06.2020

arrow_upward
0
arrow_downward

спасибо всем, наконец-то мне удалось это решить

сначала я извлекаю массив из vue [ob: Observer]

this.programming_languages = JSON.parse(JSON.stringify(response.data));

особая благодарность @stockafisso

и во-вторых, я не мог получить этот массив programming_languages ​​из метода axios, что происходит из-за характера асинхронного вызова, см. эту информативную ссылку

Как мне вернуть ответ от асинхронного вызова? < / а>

мне удалось решить это таким образом, асинхронно и ждать

methods: {

 async getPosts(){
           
          await axios.get('/api/hangman').then(response => {
                   this.programming_languages =  JSON.parse(JSON.stringify(response.data));
             
            }).catch(error => console.log(error));
        },
        
        randWord(){
            
        this.answer = this.programming_languages[Math.floor(Math.random() * this.programming_languages.length)].name;
        this.maxWrong = this.answer.length;
        },
},

 created(){
            
          this.getPosts().then(() => this.randWord());
                                
      }
person Ramin Safari    schedule 30.06.2020