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

【问题标题】：i want simple array not [__ob__: Observer]我想要简单的数组而不是 [__ob__: Observer]
【发布时间】：2020-10-18 12:02:12
【问题描述】：

我调用 api 来获取数据，我用 postman 测试它，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();
    }

我能做什么？谢谢

【问题讨论】：

你能告诉我们api响应吗？
返回模型名::all();它发送一个嵌套数组，我通过邮递员对其进行了测试，这是正确的，当我使用 JSON.parse(JSON.stringify(response.data) 时，我还可以在 [ob: Observer] 中看到该数组，但我无法提取它进入数组

标签： laravel vue.js vue-reactivity

【解决方案1】：

最有可能的错误在这里： this.programming_languages.push(JSON.parse(JSON.stringify(response.data)));

你在声明的programming_languages 中插入了 Laravel 返回的数组，而你应该覆盖或连接它。为了更好地解释，举个小例子：

考虑一下：

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

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

如果这不能解决错误，可能问题出在 Laravel 返回的数组中。如果它没有数字或未排序的键，JS 将用 Ob“填充”缺失的空格。观察者试图保留密钥。

【讨论】：

感谢您的依赖@Stockafisso，实际上它是一个嵌套数组，包含从数据库生成的字符串和数值，当我手动填充编程语言数组时没有错误，例如控制台。 log(this.programming_languages[0].columnName)) 但是当我从数据库中获取它时，我无法提取数组并将其设置为数组，[ob: Observer] 阻碍了
顺便说一下，嵌套数组是根据 id（数据库主键）和 [ob: Observer] 与
嗨拉明，不过，如果是一个嵌套数组，你应该连接它而不是推送。要查看我是否正确，请尝试执行this.programming_languages[0][0].name
嗨 Stockafisso，非常感谢你，当我 console.log(this.programming_languages[0][0].name);但是当我 this.answer = this.programming_languages[0][0].name;它抛出一个错误 TypeError: Cannot read property 'name' of undefined"，name 是数据库中的一列，我想
{{ answer }}
嗨@RaminSafari，太好了。这意味着我的解决方案是正确的。而不是使用 [0][0]，只需使用我发布的两个解决方案之一 (a,b)，您将能够访问数组中的对象。关于this.answer = this.programming_languages[0][0].name;，这似乎是您实际执行此请求时的更多问题，可能是该数组尚未实例化。也请接受我的正确答案:)

【解决方案2】：

谢谢大家，终于解决了

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

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

特别感谢@stockafisso

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

How do I return the response from an asynchronous call?

我设法以这种方式解决它，异步并等待

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

【讨论】：

{{ answer }}