random-web-tools/src/views/UrlEncodeDecode.vue

<template>
  <h2 class="tool-title">URL encode/decode</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="data">Data</label>
    <textarea id="data" v-model="toolData.data"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
      <input id="encode_mode_encode" value="encode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_encode">endode</label><br>
      <input id="encode_mode_decode" value="decode" name="encode_mode" v-model="toolData.encodeMode" type="radio"> <label for="encode_mode_decode">decode</label>
    </div>
  </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: '',
        encodeMode: 'decode',
      },
    };
  },
  computed: {
    toolResult() {
      switch (this.toolData.encodeMode) {
        case 'encode':
          return this.toolData.data.split('\n').map(encodeURIComponent).join('\n');
        case 'decode':
          return this.toolData.data.split('\n').map(decodeURIComponent).join('\n');
      }
    },
  },
}
</script>

<style lang="scss">

</style>