Show json result with vue.js
use this code:
<div id="vueapp"> <textarea v-model="jsonstr" rows="8" cols="40"></textarea> <pre>{{ jsonstr | pretty }}</pre></div>and JS:
new Vue({ el: '#vueapp', data: { jsonstr: '{"id":1,"name":"A green door","price":12.50,"tags":["home","green"]}' }, filters: { pretty: function(value) { return JSON.stringify(JSON.parse(value), null, 2); } }})
HTML and JS have this built into the language. Try...
<pre>{{ yourObject }}</pre>This gives the default indent, to specify a custom indent provide it as the third argument to JSON.stringify(...).
// replace 2 with '\t' to do tab indentation <pre>{{ JSON.stringify(yourObject, null, 2) }}</pre>If you're outside of Vue then using some combo of the above snipped will do.