Vue js“获取请求时无法读取属性'获取'未定义”

Question

此错误出现在发布和获取请求的日志中。我正在使用laravel 5，并在页面底部按顺序提供了vuejs和vue-resource。但出于某种原因，使用this.$http.get或this.$http.post发出任何请求会在标题中返回错误。

脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script> 
    <script src="js/jquery.easing.min.js"></script> 
    <script src="js/scrolling-nav.js"></script> 
    <script src="js/app.js"></script> 

JS/app.js代码

new Vue({ 

    el: '#application', 

    data: { 

    }, 

    ready: function(){ 
     this.openModal(); 
    }, 

    methods: { 
     openModal: function(){ 
      $('td').on('click', function(){ 
       if($(this).hasClass('not-month')) 
       { 

       } 
       else 
       { 
        var year = '2016'; 
        var month = $(this).parent().parent().parent().parent().find('h4').text(); 
        var day = $(this).text(); 
        console.log(day + ' ' + month + ' ' + year); 

        this.$http.get('/test', function(response){ 
         this.$set('test', response); 
        }); 

       } 
      }); 
     } 
    } 

}); 

Answer 1

您尝试使用this成一个jQuery回调。您需要参考它之前，并使用像这样的参考：

openModal: function(){ 
    var instance = this; 
    $('td').on('click', function(){ 
     if($(this).hasClass('not-month')) 
     { 

     } 
     else 
     { 
      var year = '2016'; 
      var month = $(this).parent().parent().parent().parent().find('h4').text(); 
      var day = $(this).text(); 
      console.log(day + ' ' + month + ' ' + year); 

      instance.$http.get('/test', function(response){ 
       instance.$set('test', response); 
      }); 

     } 
    }); 
} 

Answer 2

在您的组件导出默认只是粘贴以下代码。

import _Vue from 'vue'; 
import _VueResource from 'vue-resource'; 

// vue use vueResource for http request. 
_Vue.use(_VueResource); 

export default { 
name : 'SearchField', 
_this: this, 
data() { 
    return { 
    contactNumber: [] 
    } 
}, 
methods: { 
    GetContact: function() { 
    // GET /someUrl 
    return this.$http.get('localhost:8081').then(response => { 

     // get body data 
     let someData = response.body; 
     alert(someData); 

    }, response => { 
     // error callback 
     alert("error") 
    }).bind(_this); 
    } 
} 
};