출처와 사건

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)))
　　　　　　　　　　　　　　　　　　　　＾＾＾＾＾＾＾＾

참고로 한 페이지