小编Aiv*_*ras的帖子

尝试使用 VueJs 和 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>
Run Code Online (Sandbox Code Playgroud)

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) …
Run Code Online (Sandbox Code Playgroud)

html javascript json vue.js axios

1
推荐指数
1
解决办法
2105
查看次数

标签 统计

axios ×1

html ×1

javascript ×1

json ×1

vue.js ×1