Question

我要求api提取数据，我用邮递员对其进行测试，而laravel将其正确地作为数组发送，但是我想将我的数组变成[ ob ：观察者]，我无法感谢@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)));

您要在声明的programming_languages内插入Laravel返回的数组，同时应重写或合并它。为了更好地解释，请举一个小例子：

考虑这一点：

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

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

我不希望简单数组[ob：观察者]

2 个答案:

我不希望简单数组[__ob__：观察者]

2 个答案:

我不希望简单数组[ob：观察者]