[Vue.js] 優美列印JSON字串
程式原始碼及解釋
HTML:
<div id="vueapp">
<textarea v-model="jsonstr" rows="8" cols="40"></textarea>
<pre>{{ jsonstr | pretty }}</pre>
</div>
<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
想法很簡單。我們實作一個 Vue.js filter 來優美列印 textarea 裡的字串。 根據 [2] 裡面的答案， JavaScript 內建的 JSON.stringify 方法可以幫我們優美列印 JSON 字串，所以在 filter 裡頭，先用 JSON.parse 該字串， 然後再 JSON.stringify 它。
JavaScript:
'use strict';
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);
}
}
})
測試環境：
- Chromium Version 69.0.3497.81 on Ubuntu 18.04 (64-bit)
- Vue.js 2.2.4
參考：
| [1] |
| [2] | How can I pretty-print JSON using JavaScript? - Stack Overflow |