VueJsとAxiosでオブジェクトを表示しようとしています

私はVueJsを学ぶ知識を広げています。学習の理由から、Axiosライブラリを使用してJSON情報を取得しようとしています。問題はHTMLでオブジェクトを表示していることです。 HTMLを実行する以外は、コンソールのすべてを印刷しても問題ありません。VueJsとAxiosでオブジェクトを表示しようとしています

ページをロードすると何も表示されず、コンソールにすべての結果が表示されます。

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'); 
    } 
});

は、事前にありがとうございます。

出典

2017-10-31 Aivaras

値、メソッドなど）...

応答ハンドラは、Vueインスタンスのデータフィールドを設定していません。たとえば、次のコードで説明します。 dataReceivedは、VueオブジェクトのdataReceivedを参照していないため、this.dataReceivedが必要です。
```
axios.get('...') 
     .then(function (response) { 
      dataReceived = response; // <-- should be: this.dataReceived 
      console.log(dataReceived); 
      return dataReceived; 
     }) 
```
あなたはthis.dataReceived = responseを呼び出して、あなたのVueのインスタンスにthisをバインドするES2015 arrow-functionを使用することができます。（括弧に注意してください）
```
axios.get('...') 
     .then((response) => { 
      this.dataReceived = response; 
      console.log(dataReceived); 
     }) 
```
あなたのテンプレートは{{getDescription}}と<div>のテキストコンテンツにgetDescription機能をバインドしようとしますが、正しい構文は{{getDescription()}}です。 getDescriptionで使用されるデータは、AJAXの応答が戻るまでは利用できませんので、
```
<div id="app">{{getDescription()}}</div> 
```
しかし、結合は、実際に新たに受信したデータによって更新されるものでなければなりません。例えば、このバインディングは、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

出典

2017-10-31 23:09:58 tony19

詳細応答。 +1 – Aivaras

@Aivaras問題ありません:) – tony19

データオプションのプロパティにアクセスするには、getJsonメソッドにアクセスしたのと同様に、thisキーワードを使用する必要があります。

例えば、あなたのAJAX呼び出しの.thenでdataReceived変数にアクセスするには、次の調整する必要があります：

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

使用thisは、データ値（コンポーネントのオプションの他にアクセスするために、計算されましたあなたのコードを持ついくつかの問題があります

出典

2017-10-31 22:57:27

https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Bert

回答ありがとうございますが、「this」を追加した後も表示されませんHTML上の値。 – Aivaras

それ以外の場合、 'this'はあなたのVueインスタンスではなくなるため、' then（function（response）{}）を '（（response）=> {} 'に更新する必要があります） – kidCoder

あなたは{{dataReceived}}への結合を変更し、他の応答が指摘したように、この

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の中にあなたの変数は常にありますVueインスタンスの子であり、this.varNameを使用して設定する必要があります。さらに、非同期呼び出しの応答にバインドするだけで、即時の戻り値が得られます。これは（私が信じる）約束です。 Vueへようこそ、それは素晴らしいです！

編集：beforeMountの代わりにmountedの私の使用は私がこれを書いていたように個人的な選択でしたが、それでも動作するはずです。

出典

2017-10-31 23:18:00 kidCoder

VueJsとAxiosでオブジェクトを表示しようとしています

答えて

関連する問題