random-web-tools/src/views/php/Serialize.vue

<template>
  <h2 class="tool-title">PHP serialize</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>

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

    <div>
      <input
        id="mode_serialize"
        value="serialize"
        name="mode"
        v-model="toolData.mode"
        v-on:change="result"
        type="radio"
      />
      <label for="mode_serialize">serialize</label><br />
      <input
        id="mode_unserialize"
        value="unserialize"
        name="mode"
        v-model="toolData.mode"
        v-on:change="result"
        type="radio"
      />
      <label for="mode_unserialize">unserialize</label><br />
    </div>
  </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 axios from "axios";
import { config } from "../../../config";
import MonacoEditor from "@/components/MonacoEditor.vue";

export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      toolData: {
        data: "",
        mode: "serialize",
      },
      toolResult: "",
    };
  },
  methods: {
    result() {
      axios
        .post(`${config.APP_URL}/api/php/php_serialize.php`, {
          data: this.toolData.data,
          mode: this.toolData.mode,
        })
        .then((response) => {
          this.toolResult = response.data;

          Promise.resolve(response);
        });
    },
  },
};
</script>

<style lang="scss"></style>