ソースと事象

Vue-CLIでaxiosを使ったAPI呼び出しをして、結果（JSON）データをv-textで表示させようとしたところ、
[object Object]と表示されてしまった。

よくよく調べたところ、データバインドさせる際の以下の方法による仕様の違いであった。
<p>{{jsonData}}</p> ・・・　文字列を表示
<p v-text="jsonData"></p> ・・・　オブジェクトを表示

公式ドキュメントには上記2つの方法は「同じ」と記載されていたため、v-textでJSON文字列が表示されない違いが判らなかったため、本記事で解決経緯を記載。

詳細

以下のソースを実行した場合、<p>{{jsonData}}</p>はaxiosで呼び出したAPIのレスポンスのJSON文字列が表示された。
しかし、<p v-text="jsonData"></p>は[object Object]と表示された。

<template>
  <div id="app">
　　<p>{{jsonData}}</p>
　　<p v-text="jsonData"></p>
  </div>
</template>

<script >
export default {
  data() {
    return {
      info: ""
    }
  },
  methods: {
　  callApi: function () {
       this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
　　　　　.then(response => (this.jsonData = response))  
    }
  }
};
</script>

＜実行例＞

{ "data": {・・・・}}
[object Object]

原因と解決方法

公式ドキュメントをよく見ると「要求事項：String」とある。（以下、公式ページの抜粋）

つまり、v-textに設定する値は文字列として解釈されるため、JSONオブジェクトを渡しても、オブジェクトの中身を解釈してくれなかった。

JSONオブジェクトを文字列に変換してからバインドすることで解決した。

this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
　.then(response => (this.jsonData = JSON.stringify(response)))
　　　　　　　　　　　　　　　　　　　　＾＾＾＾＾＾＾＾

参考にさせていただいたページ