get returned data to display inside of vue model-CodePudding

I have a simple set of data that will come in from my method. I need the data to display inside of my vue model thats all which is inside an object or array. Honestly, any that works. Normally, just adding vm.array name or object name works on success but cannot get it to display.

new Vue({
  el: "#app",
  data: {
    mydata:{}
  },
  methods: {
    getTokenData(){
            $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts/1",
   
            success: function (data, status) {

                alert("success");
                console.log(data);
                this.mydata=data;
              
  },
  mounted: function(){
   this.getTokenData();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{mydata}}
 
 </div>

CodePudding user response：

This might work well

new Vue({
  el: "#app",
  data() {
    return {
       mydata: {}
    }
  },
  methods: {
    getTokenData(){
            axios
            .get("https://jsonplaceholder.typicode.com/posts/1")
            .then((response) => {
               
                // this.mydata=data;
                if (response.status) {
                  this.mydata = response.data;
                   console.log("myData ===>", this.mydata);
                }
            });
     }
  },
  mounted: function(){
    this.getTokenData();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
   title: {{mydata.title}}
   <br>
   body: {{mydata.body}}

 </div>