尝试使用VueJs和Axios显示对象

时间:2017-10-31 22:24:01

标签: javascript html json vue.js axios

我扩展了我学习VueJs的知识,并且出于学习的原因,我正在尝试使用axios库来获取JSON信息。 问题是在HTML中显示一个对象。在控制台中打印所有内容都可以正常工作,除了HTML。

当我加载页面时,它什么都不显示,而在控制台中则显示所有结果。

HTML文件:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>VueJs</title>
  </head>
  <body>
    <div class="innerBody" id="app">
        <p style="width: 100%; height: 40px; background: gray;">{{getDescription}}</p>
    </div>
    <script src="app.js"></script>
  </body>
</html>

JS档案:

new Vue({
    el: '#app',
    data:{
        dataReceived: [],
        errorReceived: [],
        description: '',
    },
    methods: {
        getJson: function(city){
            axios.get('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22'+city+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys')
            .then(function (response) {
                dataReceived = response;
                console.log(dataReceived);
                return dataReceived;
            })
            .catch(function (error) {
                errorReceived = error;
                console.log(errorReceived);
                return errorReceived;
            });
         },
        getDescription: function(){
            description = dataReceived.data.query.results.channel.title;
            console.log(description);
            return description;
        }
    },
    beforeMount(){
        this.getJson('boston');
    }
});

提前谢谢。

3 个答案:

答案 0 :(得分:3)

您的代码存在一些问题......

  • 您的响应处理程序未设置Vue实例的数据字段。例如,在以下代码中。 dataReceived未引用您的Vue对象的dataReceived,这需要this.dataReceived

    axios.get('...')
            .then(function (response) {
                dataReceived = response; // <-- should be: this.dataReceived
                console.log(dataReceived);
                return dataReceived;
            })
    

    您可以使用ES2015 arrow-functionthis绑定到Vue实例,然后调用this.dataReceived = response

    axios.get('...')
            .then((response) => {
                this.dataReceived = response;
                console.log(dataReceived);
            })
    
  • 您的模板尝试将getDescription函数绑定到<div>的文本内容{{getDescription}},但正确的语法是{{getDescription()}}(请注意括号)。

    <div id="app">{{getDescription()}}</div>
    

    但是,由于getDescription中使用的数据在AJAX响应返回之前不可用,因此绑定实际上应该是新接收的数据更新的内容。例如,该绑定可以是由AJAX响应处理程序设置的数据字段(例如,名为title)。

    new Vue({
      ...
    
      data() {
        return {
          dataReceived: {},
          title: ''
        }
      },
    
      methods: {
        getsJon() {
          axios.get('...')
            .then((response) => {
              this.dataReceived = response;
              this.title = parseTitle(this.dataReceived);
            });
        },
    
        parseTitle(data) {
          return /* ... */;
        }
      }
    });
    
    // HTML
    <div id="app">{{title}}</div>
    

demo

答案 1 :(得分:0)

要访问数据选项中的属性,您需要使用this关键字,类似于您访问getJson方法的方式。

例如,要访问AJAX调用的dataReceived中的.then变量,您需要调整以下内容:

axios.get('your-url')
.then(function (response) {
    this.dataReceived = response;
    console.log(this.dataReceived);
    return this.dataReceived;
})

使用this访问任何其他组件选项(数据值,计算值,方法等)

答案 2 :(得分:0)

将绑定更改为{{dataReceived}}并像这样更新您的Vue实例

new Vue({
  el: "#app",
  data: {
    dataReceived: [],
    errorReceived: [],
    description: ""
  },
  methods: {
    getJson: function(city) {
      axios
        .get(
          "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22" +
            city +
            "%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
        )
        .then(response => {
          this.dataReceived = response;
          console.log(this.dataReceived);
        })
        .catch(error => {
          this.errorReceived = error;
          console.log(this.errorReceived);
        });
    },
    getDescription: function() {
      this.description = this.dataReceived.data.query.results.channel.title;
      console.log(this.description);
    }
  },
  mounted: function() {
    this.getJson("boston");
  }
});

正如其他响应所指出的那样,Vue中的变量始终是Vue实例的子项,应使用this.varName进行设置。此外,绑定到异步调用的响应只会给你立即返回,这将(我相信)是一个承诺。欢迎来到Vue,它太棒了!

编辑:我使用mounted代替beforeMount只是个人选择,因为我写这篇文章时,它应该仍然有效。