how to send text from tiptap rich text in vuejs to jsonfile

Viewed 57

Dears, I have vue file contains tiptap rich text editor and tiptap rich text editor inside dynamic table, I am trying to write the rich text form the dynamic table to json file but when I check the json file in the console.log but it gives undefined value or null values, I want to add the rich text values to the json file. here it is my .vue file, Your help is highly appreciated

<template>
  <v-container>
    <v-form lazy-validation ref="form">
      <v-card class="pa-5"
        >rich text editor
        <v-row> <Tiptap v-model="richText" /> </v-row>
      </v-card>

      <table class="responsive-table">
        <thead>
          <tr>
            <th scope="col">#</th>

            <th class="text-left">Sample Depth</th>

            <th class="text-left">Text</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(imageTable, index) in imageTables" :key="index">
            <td scope="row" class="trashIconContainer">
              <i
                class="far fa-trash-alt"
                @click="deleteimageRow(index, imageTable)"
              ></i>
            </td>

            <td data-label="sampleDepth">
              <input
                v-model="imageTable.sampleDepth"
                class="form-control"
                type="number"
              />
            </td>

            <td>
              <Tiptap v-model="text" />
            </td>

            <td>
              <button @click="deleteimageRow" class="is-danger">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>

      <button type="button" class="btn btn-info" @click="addimageRow">
        <i class="fas fa-plus-circle"></i>

        Add
      </button>
      <v-row>
        <v-col>
          <v-btn
            width="100%"
            class="primary"
            :loading="isPdfGenerating"
            @click="generateReport(true)"
            >Generate draft report</v-btn
          >
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-btn
            width="100%"
            class="primary"
            :disabled="!isPdfGenerated"
            @click="savePdf"
            >Download generated report</v-btn
          >
        </v-col>

        <v-col>
          <v-btn
            width="100%"
            class="primary"
            :disabled="!isPdfGenerated"
            @click="generateReport(false)"
            >Make report official</v-btn
          >
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>

<script>
import Tiptap from "/src/components/TiptapView.vue";
export default {
  name: "TableView",
  components: {
    Tiptap,
  },

  data: () => ({
    field: null,
    fieldRule: [],
    fieldLines: null,
    isPdfGenerating: false,
    isPdfGenerated: false,
    pdfData: null,
    imageUploaded: false,
    imageTables: [{ sampleDepth: "", text: "" }],
  }),

  created() {},

  methods: {
    addimageRow() {
      this.imageTables.push({
        sampleDepth: "",

        sampleNumber: "",

        zoomFactor: "",

        text: "",
      });
      console.log(this.imageTables);
    },

    uppercase() {
      //pass
    },
    deleteimageRow(index, imageTables) {
      var idx = this.imageTables.indexOf(imageTables);

      console.log(idx, index);

      this.imageTables.splice(idx, 2);
    },

    generateReport: function (isDraft = true) {
      this.$refs.form.validate();

      this.$emit("pdfGenerated", null);

      this.isPdfGenerating = true;

      this.isPdfGenerated = false;

      let jsonData = {
        richText: this.richText,
        imageTables: this.imageTables,

        key: this.$store.state.key,

        isDraft: isDraft,
      };

      console.log(jsonData);

      this.$axios
        .post(this.$backendUrl + "/table", jsonData)

        .then((response) => {
          console.log(response);

          this.pdfData = { data: response.data };

          this.$emit("pdfGenerated", this.pdfData);

          this.isPdfGenerated = true;

          this.isPdfGenerating = false;
        })

        .catch((error) => {
          console.log(error);

          this.isPdfGenerating = false;

          this.isPdfGenerated = false;

          if (error.response.status == 401) {
            this.$emit("unauthorized");
          }

          if (error.response.status == 404) {
            window.alert(error.response.data.message);
          }
        })

        .then(function () {});
    },

    savePdf: function () {
      var blob = new Blob([this.pdfData.data], { type: "application/pdf" });

      var link = document.createElement("a");

      link.href = window.URL.createObjectURL(blob);

      var fileName = "Output";

      link.download = fileName;

      link.click();
    },
  },
};
</script>
0 Answers
Related