CODEWITHSUNDEEP
javascriptvue.js
littlewombat
littlewombat

Reputation: 309

Vue how to use get method

I want to send get method from Vue in html file. My code looks:

<html>
    <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="myDiv">
            <p>{{something}}</p>
        </div>
    </body>
    <script>
        new Vue({
            el: '#myDiv',
            data: function(){
                return{
                    something: ''
                }
            },
            ready: function(){
                this.getValue();
            },
            methods: {
                getValue: function(){
                    var value = value;
                    this.$http.get('https://jsonplaceholder.typicode.com/posts/1')
                        .success(function(value){
                            this.$set('value',value);
                        })
                        .error(function(err){
                            value.log(err);
                        });
                }
            }
        });
    </script>
</html>

How is it possible to put response in something in div with id="myDiv" just as string? (for example json: 

{
   "name":"Jon",
   "age":1
}

There is no error in console but my screen is totally blank.

@Update: result is:

enter image description here

@Update2 my html file (by your code):

<html>
    <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="myDiv">
          <div v-if="response.userId">
            {{ response.userId }}
            {{ response.id }}
            {{ response.title }}
            {{ response.body }}
          </div>
          <div v-if="response.error">
            <p>Request failed</p>
          </div>
    </div>
    </body>
    <script>
        var vm = new Vue({
          el: '#myDiv',
          data: {
                response: {}
          },
          created() {
          this
           .$http
           .get('https://jsonplaceholder.typicode.com/posts/1')
           .then(function(response) {
             console.log(response)
             this.$set('response', response.data)
           })
          }
        });
    </script>
</html>

Upvotes: 1

Views: 7119

Answers (1)

Srinivas Damam
Srinivas Damam

Reputation: 3045

<html>
    <head>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script>
    </head>
    <body>
        <div id="myDiv">
          <div v-if="response.userId">
            {{ response.userId }}
            {{ response.id }}
            {{ response.title }}
            {{ response.body }}
          </div>
          <div v-if="response.error">
            <p>Request failed</p>
          </div>
    </div>
    </body>
    <script>
        var vm = new Vue({
          el: '#myDiv',
          data: {
            response: {}
          },
          created() {
          this
           .$http
           .get('https://jsonplaceholder.typicode.com/posts/1')
           .then(function(response) {
             console.log(response)
             this.response = response.data
           })
          }
        });
    </script>
</html>

Upvotes: 1

Related Questions