我想要简单的数组而不是 [ob: Observer]

Question

我要求 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();
    }

我能做什么？谢谢

Answer 1

最有可能的错误在这里： 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].

回到你的问题，要解决它你有两种方法：

一）

.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“填充”缺失的空格。观察者试图保留钥匙。

Answer 2

谢谢大家，终于解决了

首先我从 vue 的 [ob: Observer] 中提取数组

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

特别感谢@stockafisso

其次是我无法从 axios 方法中获取此 programming_languages 数组，这是由于异步调用的性质而发生的，请参阅此信息 link

How do I return the response from an asynchronous call?

我设法通过这种方式解决了它，async 和 await

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());
                                
      }

我想要简单的数组而不是 [ob: Observer]

i want simple array not [ob: Observer]

laravel

vue.js

vue-reactivity

我想要简单的数组而不是 [__ob__: Observer]

i want simple array not [__ob__: Observer]

laravel

vue.js

vue-reactivity

我想要简单的数组而不是 [ob: Observer]

i want simple array not [ob: Observer]