鍍金池/ 問答/HTML/ vue獲取到數(shù)據(jù)如何展示到頁面？

vue獲取到數(shù)據(jù)如何展示到頁面？

<div id="app">
    <div>{{msg}}</div>
</div>

new Vue({

el:"#app",
data:{
    msg:"",
},
methods:{
    get:function(){
        this.$http.get("package.json").then(function(str){
            this.msg = str.data.name;
        },function(str){
            alert('失敗' + str.status); //錯誤信息
        })
    }
}

})

通過vue-resource獲取服務器上json數(shù)據(jù)，然后怎么展示在HTML上啊 我這怎么顯示不出來 T.T

回答
編輯回答
傲嬌范
  1. data采用return寫法
data() {
    return {
        msg: ''
    }
}

2.this問題，使用箭頭函數(shù),改一下

this.$http.get("package.json").then((str) => {
    this.msg = str.data.name;
}
2017年1月21日 14:05
編輯回答
擱淺

1.data采用函數(shù)的寫法
2.確保methonds里的方法被調(diào)用
3.this改變指向

2017年5月24日 03:59
編輯回答
掛念你

this指向的問題

2018年9月15日 11:34
編輯回答
尐潴豬

你調(diào)用get方法獲取的str有沒有返回呢,打印看下

2018年9月9日 20:59
編輯回答
孤巷

寫成這樣：

get(){
    this.$http.get("package.json").then((str)=>{
        this.msg = str.data.name;
    },(str)=>{
        alert('失敗' + str.status); //錯誤信息
    })
}

盡量寫成es6的箭頭函數(shù)，要么就注意this指向問題，像你那么寫，this.msg = str.data.name;這的this指向window

2017年5月8日 01:27
編輯回答
蔚藍色

推薦使用es6語法，就像樓上說的那樣。
如果現(xiàn)在這種寫法，可以這樣：

    get:function(){
        var that = this;
        this.$http.get("package.json").then(function(str){
            that.msg = str.data.name;
        },function(str){
            alert('失敗' + str.status); //錯誤信息
        })
    }
2018年6月21日 01:48