51 lines
1001 B
Vue
51 lines
1001 B
Vue
|
<template>
|
||
|
|
<h2 class="tool-title">JSON Minifier</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="minify"></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="mt-5 mb-5">
|
||
|
|
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="result">Result</label>
|
||
|
|
<MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MonacoEditor from "@/components/MonacoEditor.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
MonacoEditor
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
toolData: {
|
||
|
|
data: '',
|
||
|
|
},
|
||
|
|
toolResult: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
minify() {
|
||
|
|
if (!this.toolData.data.length) {
|
||
|
|
this.toolResult = '';
|
||
|
|
} else {
|
||
|
|
try {
|
||
|
|
this.toolResult = JSON.stringify(JSON.parse(this.toolData.data));
|
||
|
|
} catch (e) {
|
||
|
|
this.toolResult = 'invalid syntax';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
</style>
|