You've already forked random-web-tools
Add json formatter
This commit is contained in:
50
src/views/JSONFormatter.vue
Normal file
50
src/views/JSONFormatter.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<h2 class="tool-title">JSON formatter</h2>
|
||||
<hr class="mt-5 mb-5">
|
||||
|
||||
<div class="input-group">
|
||||
<label for="data">Data</label>
|
||||
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
|
||||
</div>
|
||||
|
||||
<hr class="mt-5 mb-5">
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Result</label>
|
||||
<textarea id="result" v-model="toolResult"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
toolData: {
|
||||
data: '',
|
||||
minifyJson: '',
|
||||
},
|
||||
toolResult: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.result();
|
||||
},
|
||||
methods: {
|
||||
result() {
|
||||
if (!this.toolData.data.length) {
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
this.toolResult = JSON.stringify(JSON.parse(this.toolData.data), null, 4);
|
||||
} catch (e) {
|
||||
this.toolResult = 'invalid syntax';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
Reference in New Issue
Block a user