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>