Question

您好我正在尝试在laravel应用程序中使用Vue但我有一些问题。基本上我需要从get请求中检索数据并根据它构建一些结果。问题是我甚至无法正确检索数组变量中的数据。我最好解释一下

在我的app.js中加载我的vue实例

Vue.component('search', require('./components/search.vue'));

const app = new Vue({
   el: '#app',
});

在我的main.blade.php中插入我的vue组件

<search class="row expanded container"></search>

这是我的vue文件

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Conhenhmponent</div>

                    <div class="panel-body">
                        I'm an example component!

                        {{test}}

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    data () {
        return {
            test:"this is my sample",
            results: []
        }
    },

    mounted () {
        console.log(this); // here my obj exists  
        console.log('Component mounted.') // it works
        axios.get("http://localhost:8000/api/search?q=qwfqw")
        .then(function(resp){
            if(typeof resp.data == 'string') {
                resp.data = JSON.parse(resp.data);
            }
            console.log(resp.data); // here the object exists
            this.results = resp.data;
        });
    }
}


</script>

页面加载但我得到一个错误，表示结果var未定义。如何用get数据填充我的结果var？这样做的正确方法是什么？

Answer 1

这是一个范围问题。在您的代码中，回调中的this引用函数本身，而不是vue实例，因此它是undefined。要解决此问题，您应该使用箭头函数（Laravel已经正确配置了ES6），这将确保this引用vue实例：

axios.get("http://localhost:8000/api/search?q=qwfqw")
 .then(resp => {
     if(typeof resp.data == 'string') {
         resp.data = JSON.parse(resp.data);
     }
     console.log(resp.data); // here the object exists
     this.results = resp.data;
 });

Answer 2

javascript中的

this取决于调用函数的内容而不是函数的定义。解决问题的一种方法是使用this将对var self = this;的引用存储到另一个变量中，然后引用self.results = resp.data;

之类的结果

使用bind函数的另一种方法是Arrow函数。使用箭头函数，其范围将更改为词汇定义的位置。

mounted () {
        var self = this;
        console.log(this); // here my obj exists  
        console.log('Component mounted.') // it works
        axios.get("http://localhost:8000/api/search?q=qwfqw")
        .then(function(resp){
            if(typeof resp.data == 'string') {
                resp.data = JSON.parse(resp.data);
            }
            console.log(resp.data); // here the object exists
            self.results = resp.data;
        });
    }

vue 2基本测试中的undefined属性

2 个答案: