尝试使用 VueJs 和 Axios 显示对象答案

【问题标题】：Trying to display object with VueJs and Axios尝试使用 VueJs 和 Axios 显示对象
【发布时间】：2018-04-13 05:03:56
【问题描述】：

我正在扩展我学习 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');
    }
});

提前谢谢你。

【问题讨论】：

标签： javascript html json vue.js axios

【解决方案1】：

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

您的响应处理程序没有设置 Vue 实例的数据字段。例如，在下面的代码中。 dataReceived 不引用 Vue 对象的 dataReceived，这需要 this.dataReceived。

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

您可以使用ES2015 arrow-function 将this 绑定到您的Vue 实例，然后调用this.dataReceived = response。

axios.get('...')
        .then((response) => {
            this.dataReceived = response;
            console.log(dataReceived);
        })

您的模板尝试使用{{getDescription}} 将getDescription 函数绑定到<div> 的文本内容，但正确的语法是{{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

【讨论】：

【解决方案2】：

将您的绑定更改为 {{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 只是个人选择，它应该仍然有效。

【讨论】：

【解决方案3】：

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

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

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

使用this 访问任何其他组件选项（数据值、计算值、方法等）

【讨论】：

stackoverflow.com/questions/20279484/…
感谢您的回答，但是添加“this”后，它仍然没有在HTML上显示值。
您必须将您的 then(function(response){}) 更新为 then((response)=>{}) ，否则 this 不再是您的 Vue 实例