<b-row class="mb-3">
<b-col>
<div class="float-right">
<b-form-select
v-model="selected"
:options="options"
></b-form-select>
</div>
</b-col>
<b-col>
<b-button
id="show-btn"
variant="dark"
class="text-white"
:disabled="!this.selected"
@click="showModal"
>Add Data</b-button
>
</b-col>
</b-row>
A select field is available for choosing different data types such as images, blocks, and paragraphs:
options: [
{ value: null, text: "Please select an option" },
{ value: "image", text: "Image" },
{ value: "block", text: "Block" },
{ value: "paragraph", text: "Paragraph" },
{ value: "link", text: "Link" },
],
Each data type opens in a modal based on if conditions within the modal:
<div v-if="selected === 'image'">
<image></image>
</div>
<div v-if="selected === 'paragraph'">
<paragraph></paragraph>
</div>
<div v-if="selected === 'block'">
<block></block>
</div>
Different fields are set up for each data type:
image_form: {
text: {
en: "",
np: "",
},
caption: {
en: "",
np: "",
},
image: "",
type: "",
},
paragraph_form: {
description: {
en: "",
np: "",
},
images: [],
},
To reset the form within the modal after clicking the ShowModal button, a specific function needs to be implemented in the code. This functionality allows the user to clear the previous data when switching between data types in the dropdown selection.