Question

我开始使用vuejs，我正试图在没有成功的情况下进行http get调用。我已经尝试了几个示例来说明如何做到这一点，但我在我的控制台中收到以下错误：这。$ http未定义。

HTML

<!doctype html>
<html>
    <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>


     <script src="https://unpkg.com/vue"></script>


    </head>
    <body>

        <div id="app">
            <p v-bind:title='message'>
                {{ message }}
            <p>
            <button v-on:click='changeView("matrice")'>get data</button>


        </div>
    </body>
         <script type="text/javascript" src="/front/lala_web/matrice.js"></script>
</html>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Empty data'
  },
  methods:{
    changeView: function(v){
        this.$http.get('/view/'+v)
            .then(function(resp){
                this.message = resp.data;
            })
            .catch(function(){alert('Error')});
        }
    }
})

我能够使用以下js获取http get调用，但这样做不会更改vuejs的data.message值，并且我得到以下错误数据未定义。

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Empty data'
  },
  methods:{
    changeView: function(v){
        var viewUrl = '/view/'

        $.ajax({
           url: viewUrl+v,
           method: 'GET',
           success: function (resp) {
                if (resp.error == false){
                    console.log(resp)
                    data.message = resp.data
                }

           },
           error: function (error) {
               console.log(error)

           }
       });

    }
  }
})

Answer 1

您需要引用this.message而不是data.message。此外，您需要在ajax调用范围之外保存对this的引用，因为成功处理程序中的this没有引用Vue实例：

changeView: function(v){
    var viewUrl = '/view/'
    var self = this;

    $.ajax({
       url: viewUrl+v,
       method: 'GET',
       success: function (resp) {
            if (resp.error == false){
                console.log(resp)
                self.message = resp.data
            }
       },
       error: function (error) {
           console.log(error)
       }
   });
}

vuejs＆amp; http.get呼叫无效

1 个答案: